具有不同 for 的 ngFor 标签

在 Angular 应用程序中，ngFor 标签非常常用，它允许您通过一个循环将数据集合一次性地渲染到模板中。

ngFor 标签允许您使用各种循环条件，包括：

1. 循环索引变量 在 ngFor 中使用 #i 变量可以用于获取循环索引变量。

<ul>
  <li *ngFor="let item of items; index as i">{{i}} - {{item}}</li>
</ul>

2. 循环奇偶性和第一个/最后一个项目的标记 使用 ngFor 来设置奇偶性和标记第一个和最后一个条目非常方便。

<ul>
  <li *ngFor="let item of items; index as i; even as isEven; odd as isOdd; first as isFirst; last as isLast;">
    {{item}} - 
    <span *ngIf="isEven">Even</span>
    <span *ngIf="isOdd">Odd</span>
    <span *ngIf="isFirst">First</span>
    <span *ngIf="isLast">Last</span>
  </li>
</ul>

3. 循环开始和结束值 除了在循环中包含项以外，有时您可能需要使用变量设置循环的起始和结束值。

<ul>
  <ng-container *ngFor="let i of [0, 1, 2, 3, 4]; let j = index">
    <li *ngFor="let item of items.slice(i, i + 2); let k = index;">{{j}}-{{k}} - {{item}}</li>
  </ng-container>
</ul>

4. 用枚举变量循环 如果您需要一个枚举的循环，可以使用 enum 变量。

<ul>
  <ng-container *ngFor="let status of Object.values(UserStatus);">
    <li *ngFor="let user of users | filter:{status:status}; index as i;">
      {{i}} - {{user.name}} ({{status}})
    </li>
  </ng-container>
</ul>

总结：

ngFor 标签非常灵活，可用于各种循环条件。

在 for 循环中使用索引变量、循环状态、和枚举变量等便捷的功能，可以让开发人员更轻松地控制循环。