Angular2 NgFor inside树模型:删除后添加元素的顺序错误

Question

我正在玩角2 alpha 44.

我有一个树模型并使用递归来显示它.每组包含"标准","细分"和其他"组".我们可以在任何级别删除和添加所有这些元素.

当我删除元素然后在同一级别添加其他元素时,有一种奇怪的行为.新订单是错误的,新元素获得了更大的position属性,数组在此属性上排序,但它们出现在元素被删除的位置.

新阵列将记录在控制台中,并以正确的顺序显示.如果使用"SHOW/HIDE"按钮删除并添加所有树,则视图现在的顺序正确.

您可以在此plunker中看到此行为并轻松理解:

1. 删除第一个元素
2. 添加一个新元素
3. 请参阅视图中的顺序不正确,并且与控制台日志内部的顺序不同
4. 在"显示/隐藏"按钮上单击2次
5. 看到视图中的顺序现在是正确的

是否有类似ng1 trackBy的ng2 NgFor？我在源头内找不到它.

Answer 1

trackBy在2.0.0-beta.3中添加

另请参阅https://github.com/angular/angular/issues/4402

使用模板元素：

@Component(
  template: `
   <template ngFor let-item [ngForOf]="items" [ngForTrackBy]=customTrackBy">
      {{item}}
   </template>
   `
)
class MyComponent {
  customTrackBy(index: number, obj: any): any {
    return index;
  }
}

使用 *ngFor：

@Component(
  template: `
   <div *ngFor="let item of items; trackBy:customTrackBy">
      {{item}}
   </div>
   `
)
class MyComponent {
  customTrackBy(index: number, obj: any): any {
    return index;
  }
}

另请参阅https://github.com/angular/angular/issues/6872

我可以使用 **ngFor="let character of characters | async" *ngForTrackBy="customTrackBy"

或者我可以使用*ngFor="let character of characters | async ; trackBy:customTrackBy"

另请参阅嵌套 ngFor 中的 Angular 2 ngModel 绑定