如何突破inner * ngFor？

我有兩個從REST API中獲得的對象數組。第一個數組包含jobId，第二個數組包含員工詳細信息。我需要以這樣的方式顯示：對於每個工作ID，所有具有該工作ID的僱員都需要以幻燈片的形式顯示。我知道*ngFor沒有「休息」。我想知道我應該使用什麼？我不知道我應該如何在這裏使用管道。任何幫助表示讚賞。如何突破inner * 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});

但它沒有奏效。

來源

2017-06-15 Impromptu_Coder

也許通過手動分組？

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的員工數組。

這對你有幫助嗎？

來源

2017-06-15 09:14:28 trichetriche

如何突破inner * ngFor？

回答

相關問題