Question

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

我知道*ngFor没有＆＃34;休息＆＃34;。我想知道我应该用什么？我不知道我到底应该如何使用烟斗。任何帮助表示赞赏。

这是我的打字稿代码：

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的每个员工。

这对你有帮助吗？

如何打破内心* ngFor？

1 个答案: