Angular2 NgFor 内部树模型：删除然后添加元素时顺序错误

Question

我正在玩 angular 2 alpha 44。

我有一个树模型并使用递归来显示它。每组包含 'Criterions'、'Segments' 和其他 'Groups'。我们可以在任何级别删除和添加所有这些元素。

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

新数组记录在控制台中并以正确的顺序出现。如果您使用 "SHOW/HIDE" 按钮删除并添加所有树，视图现在的顺序是正确的。

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

删除第一个元素
添加新元素
看到视图中的顺序不正确并且与内部的顺序不相同控制台日志
点击 "SHOW/HIDE" 按钮 2 次
看到视图中的顺序现在是正确的

是否有类似 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

I can either use the * *ngFor="let character of characters | async" *ngForTrackBy="customTrackBy"

or I can use *ngFor="let character of characters | async ; trackBy:customTrackBy"

另见

Angular2 NgFor 内部树模型：删除然后添加元素时顺序错误

Angular2 NgFor inside tree model: wrong order when remove and then add elements

javascript

typescript

angular