Angular 5 ngfor让两个变量同时

Question

我需要在for中分配两个变量。在Angular 5+中类似

<div *ngFor="let a of apple, let b of ball">
  <a [routerLink]="['/ball',b]">
    {{a}}
  </a>
</div>

有什么建议吗？

预先感谢您的帮助。

Answer 1

将数据组织为对象数组，而不是使用两个数组，这自然得多：

this.things = [
  {
    apple: 'apple1',
    ball: 'ball1'
  },
  {
    apple: 'apple2',
    ball: 'ball2'
  }
]

然后可以像这样遍历此数组：

<div *ngFor="let thing of things">
  <a [routerLink]="['/ball', thing.ball]">
    {{ thing.apple }}
  </a>
</div>

这也是更具可读性和标准的做法。

Answer 2

看来您的数组长度相同，即Parallel Arrays。 您应避免嵌套 ngFor。

您可以使用一个数组的索引来查看另一个数组：

<div *ngFor="let a of apple; let i = index">
    <a [routerLink]="['/ball', ball[i]]">{{a}}</a>
</div>

Answer 3

您可以使用ngFor的索引来访问第二个数组的元素。

<ng-container *ngFor="let a of apple; index as i">
   <h1>{{a}}</h1>
   <h2>{{b[i]}}</h2>
</ng-container>