Angular 17/18中如何在@for指令中定义index变量？

Angular 17 用法 #

Angular 17 引入的新控制流指令（@for）和传统 *ngFor 语法不同，不支持 let i = index 这种变量声明方式，而是通过元组解构直接获取索引：

修改后的可运行代码如下：

const users = [
    { id: 1, name: 'Ali' },
    { id: 2, name: 'reza' },
    { id: 3, name: 'jack' },
];

<ul>
  @for (user, i of users; track user.id) {
  <li>{{ user.name + i }}</li>
  } @empty {
  <span>Empty list of users</span>
  }
</ul>

这里的 i 就是当前循环的索引，除了索引，还可以解构获取其他状态变量，比如：

• user, i, isEven of users：isEven 表示当前项是否为偶数位
• user, i, isOdd of users：isOdd 表示当前项是否为奇数位

Angular 18 用法 #

Angular 18 对控制流指令做了语法兼容优化，现在同时支持两种方式获取索引：

方式1：元组解构（兼容 Angular 17 写法） #

和 Angular 17 的用法完全一致，无需改动即可运行：

<ul>
  @for (user, i of users; track user.id) {
  <li>{{ user.name + i }}</li>
  } @empty {
  <span>Empty list of users</span>
  }
</ul>

方式2：类 *ngFor 的 let 声明语法 #

现在可以像 *ngFor 一样用 let 来声明索引等变量，抹平了新旧语法的差异：

<ul>
  @for (user of users; track user.id; let i = index; let isEven = even) {
  <li>{{ user.name + i }} {{ isEven ? '(even)' : '' }}</li>
  } @empty {
  <span>Empty list of users</span>
  }
</ul>

内容的提问来源于stack exchange，提问作者Alireza Ahmadi