Angular中如何在新@for循环中使用slicePipe？

Angular 17+引入的新@for语法使用slicePipe的逻辑和旧版*ngFor一致，仅循环声明语法有变化。以下是你提供的旧版代码转换后的完整示例：

@Component({
  selector: 'slice-list-pipe',
  template: `
    <ul>
      @for (i of collection | slice : 1 : 3; track i) {
        <li>{{ i }}</li>
      }
    </ul>
  `,
})
export class SlicePipeListComponent {
  collection: string[] = ['a', 'b', 'c', 'd'];
}

关键变化说明： #

• 旧版的<li *ngFor="let i of collection | slice : 1 : 3">替换为块级语法@for (i of collection | slice : 1 : 3; track i) { ... }
• track i是@for语法的必填项，用于Angular跟踪列表项身份；如果是复杂对象，建议使用唯一属性（如track i.id）作为跟踪标识
• slicePipe的参数（起始索引1、结束索引3）完全保留，功能和旧版一致，最终会渲染'b'和'c'两个列表项

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