Печать элемента i и i + 1 списка с использованием ngFor - PullRequest
0 голосов
/ 22 октября 2018

Я хочу напечатать содержимое списка, печатая одновременно элементы i и i + 1.Это фиктивный пример того, как вы можете сделать это на Java или любом другом языке программирования:

List list = new ArrayList<>();
for(int i = 0; i<list.size() - 1; i++)
   System.out.println(list[i] + " " + list[i+1]);

Я хочу добиться того же поведения в Angular с помощью директивы ngFor.Я попытался использовать индекс, но по какой-то причине я не могу заставить ngFor повторяться до длины - 1 элемент.

Редактировать: Чтобы быть более конкретным в проблеме:

<div class="row" *ngFor="let item of items; let index=index">
   <div class="col">
     {{items[index]}}
   </div>
   <div class="col">
     {{items[index+1]}}
   </div>
</div>

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Да, вы можете использовать локальную переменную odd:

<ng-container *ngFor="let item of items; let i = index; let odd = odd">
   <li *ngIf="odd">{{items[i]}} - {{items[i+1]}}</li>
</ng-container>

Но использование even безопаснее (поскольку оно не нарушит работу приложения, если длина массива четна):

<ng-container *ngFor="let item of items; let i = index; let even = even">
   <li *ngIf="even">{{items[i-1]}} - {{items[i]}}</li>
</ng-container>
0 голосов
/ 22 октября 2018

Хорошо, если вы перейдете к документации или любому другому блогу, касающемуся *ngFor, вы можете встретить index после точки с запятой, например:

<li *ngFor="let item of items; index as i;">{{item}} - {{ items[i+1] }}</li>

Подробнее можно найти здесь.

Пример Stackblitz

...