Angular 17转译新控制流语法时出现NG5002错误，如何解决？

Angular 17的新@for控制流语法强制要求添加track表达式，这个机制和原*ngFor的trackBy作用一致，用来帮助Angular识别列表项的唯一性，避免不必要的DOM重绘，所以直接写@for (item of items) { ... }会触发NG5002错误，解决方法如下：

• 使用列表项的唯一标识符作为track值（推荐方式，适合对象数组）

  @for (item of items; track item.id) {
    <div>{{ item.name }}</div>
  }
  

• 如果是值类型数组（如字符串、数字数组），可以直接track项本身

  @for (item of items; track item) {
    <div>{{ item }}</div>
  }
  

• 用索引作为track值（不推荐，数组元素顺序变化时会导致性能问题）

  @for (item of items; track $index) {
    <div>{{ item.name }} - {{ $index }}</div>
  }
  

• 迁移原有trackBy函数的场景
  如果之前*ngFor使用了自定义trackBy函数，直接在track表达式中调用函数即可：
  组件代码：

  trackById(index: number, item: any): number {
    return item.id;
  }
  

  模板代码：

  @for (item of items; track trackById($index, item)) {
    <div>{{ item.name }}</div>
  }
  

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