内部から壊す方法* ngFor？

Question

私はREST APIから得ているオブジェクトの2つの配列を持っています。最初の配列にはjobIdが含まれ、2番目の配列には従業員の詳細が含まれます。すべての職務IDについて、その職務IDを持つ従業員をすべてスライドに表示する必要があるように表示する必要があります。

*ngForには「中断」がありません。私は何を使うべきか知りたいですか？ここでパイプをどれくらい正確に使うべきかわかりません。どんな助けもありがとうございます。ここで

は私のtypescriptですコードです：

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を持つすべての従業員を（各ジョブごとに）含む新しい配列が作成されました。

これは役に立ちましたか？