Question

我正在玩角2 alpha 44。

我有一个树模型并使用递归来显示它。每个小组都包含＆＃39; Criterions＆＃39;，＆＃39; Segments＆＃39;和其他人＆＃39;团体＆＃39;。我们可以在任何级别删除和添加所有这些元素。

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

新阵列将在控制台中记录，并以正确的顺序显示。如果您使用＆＃34; SHOW / HIDE＆＃34;删除并添加所有树。按钮，视图现在顺序正确。

你可以see this behavior in this plunker and understand easily：

删除第一个元素
添加新元素
看到视图中的顺序不正确且与内部不一样控制台日志
点击2次＆＃34;显示/隐藏＆＃34;按钮
查看视图中的顺序现在是否正确

是否有像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"

另见Angular 2 ngModel bind in nested ngFor

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

1 个答案: