为什么跟踪 $index 对于动态数组效果很好？

Question

我正在尝试这段代码，因为我看到很多人使用

track $index

@Component({
  selector: 'app-root',
  template: `
  <ul>
    @for (item of array; track $index) {
      <li>{{$index}}: {{item.value}}</li>
    }
  </ul>

  <button (click)="removeSecond()">remove second</button>
  `,
})
export class App {
  array = [{ value: 'A' }, { value: 'B' }, { value: 'C' }, { value: 'D' }];

  removeSecond() {
    this.array.splice(1, 1);
  }
}

我预计，如果数组通过拼接而更改，它将显示不正确的项目，但它不会并继续显示正确的项目，我认为它会显示 A、B、C 而不是 A、C、D

现在我不太明白轨道是如何工作的

Answer 1

$index

维护数组的正确内容。当您依赖数组中特定项目的索引，然后通过调用例如来操作数组时，可能会出现问题。

splice

。

对代码的微小更改就证明了这一点。在这里，我将值为“C”的项目着色为红色。但是当删除“B”时，彩色项目是“D”，因为我依赖于项目索引：

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ul>
    @for (item of array; track $index) {
      <li [class.red]="$index === redIndex">{{$index}}: {{item.value}}</li>
    }
  </ul>

  <button (click)="removeSecond()">remove second</button>
  `,
  styles: `
    li.red {
      color: red;
    }
  `
})
export class App {
  array = [{ value: 'A' }, { value: 'B' }, { value: 'C' }, { value: 'D' }];
  redIndex = this.array.findIndex(item => item.value === 'C');

  removeSecond() {
    this.array.splice(1, 1);
  }
}