Wie aus inneren * ngFor zu brechen?

Question

Ich habe zwei Array von Objekten, die ich von einer REST-API bekomme. Das erste Array enthält Job-IDs und das zweite Array enthält Mitarbeiterdetails. Ich muss so anzeigen, dass für jede Job-ID alle Mitarbeiter mit dieser Job-ID in Folien angezeigt werden müssen.

Ich weiß, dass *ngFor hat keine "Pause". Ich möchte wissen, was ich verwenden soll? Ich weiß nicht, wie genau ich hier eine Pfeife benutzen soll. Jede Hilfe wird geschätzt.

Hier ist mein Typoskript Code:

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); 
    } 
} 

Das ist mein HTML-Code:

<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> 

Einige mir bitte sagen, wie es angezeigt werden, wie pro meine Anforderung. Ich versuchte mit

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

Aber es hat nicht funktioniert.

Answer 1

Vielleicht durch manuelle Gruppierung?

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); 
} 

Es ist wahrscheinlich nicht der beste Weg, es zu tun (und die Komplexität kann ein kleines bisschen zu hoch sein), aber ich denke, es ist Ihr Problem lösen könnte.

Sie haben jetzt ein neues Array, das (für jeden Job) Ihre Job-ID und jeden Mitarbeiter mit dieser ID in einer Reihe von Mitarbeitern enthält.

Hat Ihnen das geholfen?