nfFor从angular2防止更新嵌套标记元素

Question

我尝试从Angular 2开始。使用稳定版本2.0.0。 我想更新列表的子列表。我从服务中获得的每个列表。对于这个在angular2中我使用ngFor这两个部分。

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

Link on plunker：

1. app.ts - 在这里，上面的列表
2. race.component.ts - 与更新按钮

Answer 1

那是因为你返回新的数组每次子列表元素。

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); 
} 

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

Angular2通过旧阵列新数组匹配

in 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; 
} 

或A B它更好地使用独特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