使用 ngFor 打印列表的第 i 和 i+1 个元素

Question

我想通过同时打印第 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]);

我想要的是使用 ngFor 指令在 Angular 中实现相同的行为。我尝试使用索引，但出于某种原因我无法让 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>

Answer 1

好吧，如果您查看有关 *ngFor 的文档或任何其他博客，您可能会在这样的分号后遇到 index：

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

More to find here.

Stackblitz example

Answer 2

是的，您可以使用 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>

使用 ngFor 打印列表的第 i 和 i+1 个元素

Printing the i and i+1 element of a list using ngFor

ngfor

angular