* ng对于基本数据类型的行为

Sum*_*wal 4 angular2-template angular

我有一个要*ngFor在HTML页面上显示的对象列表。现在,用户与U​​I进行交互并更改原始值之一(布尔值,从false变为true)。

根据我的理解,*ngFor仅当列表对象被完全修改(即删除并再次添加到列表)时,才会呈现更改。如果我对这个概念是正确的,那么您能否建议一种方法来反映基本类型的更改,而无需重新初始化组件或修改对象引用。

例如:

  <div *ngFor="let item of list">
        <md-checkbox [(ngModel)]="item.selected"></md-checkbox>
  </div>
Run Code Online (Sandbox Code Playgroud)

用户单击该复选框,但是在服务器进行某些验证后必须选中该复选框。因此,假设需要取消选中该复选框,并且用户会在小吃店收到消息。因此,我遍历列表并将其修改item.selected为false。但是,当我在对象项中修改了原始类型selected(boolean)时,更改未反映出来。因此,如何在不重新加载或初始化页面的情况下呈现新值。

如果需要更多输入,请告诉我。

Gün*_*uer 5

如果使用原始值,则需要 trackBy

  <div *ngFor="let item of list trackBy:trackByIdx">
        <md-checkbox [(ngModel)]="item.selected"></md-checkbox>
  </div>
Run Code Online (Sandbox Code Playgroud)
  trackByIdx(index: number, obj: any): any {
    return index;
  }
Run Code Online (Sandbox Code Playgroud)

另请参阅Angular2 NgFor内部树模型:删除然后添加元素时顺序错误

根据下面的讨论进行更新

更改ngModel输入值更改时所绑定的布尔值,可能会导致ngModel不被更新。添加人为更改和callign detectChanges可用于解决。

constructor(private cdRef:ChangeDetectorRef) {}

deactivate(index: number) {
  this.list[index][0] = true;
  this.cdRef.detectChanges();
  this.list[index][0] = false;
  this.cdRef.detectChanges();
  console.log(this.list);
}
Run Code Online (Sandbox Code Playgroud)

柱塞示例