Угловая 5 нг для двух переменных одновременно

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

Вы можете использовать индекс ngFor для доступа к элементам второго массива.

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

Answer 3

Похоже, что ваши массивы имеют одинаковую длину, то есть Parallel Arrays . Вам следует избегать вложения ngFor.

. Вы можете использовать индекс одного массива для просмотра другого:

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