Angular 5 ng允許兩個變量同時出現

Question

我需要為其分配兩個變量。 在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>