乘以 ngFor Angular 2

【问题标题】：Multiply ngFor Angular 2乘以 ngFor Angular 2
【发布时间】：2018-06-01 06:29:43
【问题描述】：

我想用 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>

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

【问题讨论】：

你需要有一个数组，并在使用 ngFor 访问它之前构造它

标签： angular typescript

【解决方案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>

【讨论】：