Question

我尝试从Angular 2开始。使用稳定版本2.0.0。我想更新列表的子列表。我从服务中获得的每个列表。为了达到角度2，我在两个部分都使用了ngFor。

问题： 当我使用ngFor作为上部列表时，子列表不想更新。如何解决这个问题？当我使用ngFor仅用于子列表时 - 一切正常（我只能更新子列表）。

app.ts - 此处上方列表
race.component.ts - 带有更新按钮的子列表元素

Answer 1

那是因为你每次都会返回新数组。

list():Array<any>{
  return [{name: "London"}, {name: "Paris"}];
}

Angular2通过以下方式将旧数组与新数组匹配：

NgFor指令（https://github.com/angular/angular/blob/2.0.2/modules/%40angular/common/src/directives/ng_for.ts#L122-L127）

NgFor.prototype.ngDoCheck = function () {
  if (this._differ) {
    var changes = this._differ.diff(this.ngForOf);
    if (changes) this._applyChanges(changes);
  }
};

在diff方法中触发了下一个函数：

function looseIdentical(a, b) {
  return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
}

javascript {} === {}中的

始终为false

因此，您的列表将始终重绘。

我认为有两种解决方法：

1）使用array代替返回array的函数

<强>组件

list = [{name: "London"}, {name: "Paris"}];

<强> HTML

*ngFor="let race of list"

<强> Plunker Example

2）要通过ngFor选项自定义默认跟踪算法trackBy指令：

<强>组件

trackByFn(index, race) {
  return index;
}

或使用唯一id更好一点：

trackByFn(index, race) {
  return race.id
}
list():Array<any>{
  return [{id: 1, name: "London"}, {id: 2, name: "Paris"}];
}

并在html中：

*ngFor="let race of list(); trackBy: trackByFn"

<强> Plunker Example

查看有关trackBy的详细信息：

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngfortrackby

nfFor from angular2阻止更新嵌套标记元素

1 个答案: