乘以ngFor Angular 2

Question

我想用ngFor传递两个参数，类似这样的

<mat-card *ngFor="let room of arr; let floor of floorArr">
  <mat-card-content>
    <h3>Room Number: {{room}}</h3>
    <p>Floor: {{floor}}</p>
  </mat-card-content>
</mat-card>

你能帮我吗 - 有可能做这样的事吗？写这个的正确方法是什么？

Answer 1

您可以包含索引引用，然后通过以下方式访问该数组：

<mat-card *ngFor="let room of arr; let i = index">
  <mat-card-content>
    <h3>Room Number: {{room}}</h3>
    <p>Floor: {{floorArr[i]}}</p>
  </mat-card-content>
</mat-card>

另一种选择是将其映射到组合数组，然后像这样迭代：

getArray(){
   return this.arr.map((a, i) => ({ room: a, floor: this.floorArr[i] }));
};


<mat-card *ngFor="let obj of getArray()">
  <mat-card-content>
    <h3>Room Number: {{obj .room}}</h3>
    <p>Floor: {{obj.floor}}</p>
  </mat-card-content>
</mat-card>