如何从内部打破 *ngFor

Question

我有两个对象数组，我从REST API获得。第一个数组包含 jobId，第二个数组包含员工详细信息。我需要以这样一种方式显示：对于每个作业 ID，具有该作业 ID 的所有员工都需要显示在幻灯片中。

我知道*ngFor没有"休息"。我想知道我应该使用什么？我不知道我应该如何在这里使用管道。任何帮助，不胜感激。

这是我的打字稿代码：

import { Component,OnInit,ViewChild } from '@angular/core';
import { NavController, NavParams,Slides  } from 'ionic-angular';
import { HttpService } from '../../providers/http-service';
@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
  providers: [HttpService]
})
export class Details implements OnInit {
@ViewChild(Slides) slides: Slides;
empdetails:Array<any>=[];
jobs:Array<any>=[];
  constructor(public navCtrl: NavController, public navParams: NavParams,public httpService: HttpService) {}
 ngOnInit()
 {
   this.slides.lockSwipes(true);
   this.getempDetails();
   this.getJobDetailsfunc();
 }
getempDetails()
 {
     this.httpService.post('/getempdetails').subscribe(resp=>{
     this.empdetails = resp.data;
      });
 }
 getJobDetailsfunc()
 {
     this.httpService.post('/getJobDetails').subscribe(resp=>{
     this.jobs = resp.data;
      });
 }
 public showPrevious(): void {
    this.slides.lockSwipes(false);
     this.slides.slidePrev(500);
     this.slides.lockSwipes(true);
  }
  public showNext(): void {
    this.slides.lockSwipes(false);
    this.slides.slideNext(500);
    this.slides.lockSwipes(true);
  }
}

这是我的HTML代码：

<ion-slides>
    <ion-slide *ngFor="let jobObj of jobs">
        <ion-slide *ngFor="let empObj of empdetails; let i=index">
            <span *ngIf="jobObj.jobId==empObj.jobId">   checking for employees with same jobId and displaying their details
                  <h5>{{i+1}}</h5>                      Not able to break if jobId is different
            <span [innerHTML]="empObj.empName"></span>
            </span>
            <ion-row margin-top>
                <ion-col>
                    <button (click)="showPrevious()" ion-button text-only [disabled]="i === 0">Previous</button>
                </ion-col>
                <ion-col>
                    <button *ngIf="i < empdetails.length - 1" (click)="showNext()" ion-button text-only>Next</button>
                </ion-col>
            </ion-row>
        </ion-slide>    
    </ion-slide>
</ion-slides>

有些请告诉我如何根据我的要求显示它。我试过使用

_.groupBy(this.empdetails,function(obj){
return obj.jobId});

但它没有用。

Answer 1

也许通过手动分组？

this.myGroupedArray = this.jobs.reduce((prev, next) => {
    let pushObj = {
        id: next.id,
        employees: []
    };
    prev.push(pushObj);
}, []);
for (let employee of this.empdetails) {
    this.myGroupedArray.find(item => item.id === employee.jobId).employees.push(employee);
}

这可能不是最好的方法(而且复杂性可能有点太高(，但我认为它可以解决您的问题。

现在，您有一个新的数组，其中包含(对于每个作业(您的作业 ID，以及员工数组中具有此 ID 的每个员工。

这对你有帮助吗？