*ngFor 原始数据类型的行为

Question

我在 HTML 页面上使用 *ngFor 显示了一个对象列表。现在用户与 UI 交互并更改原始值之一（布尔值，从 false 到 true）。

根据我的理解，*ngFor 只会在列表对象被完全修改（即删除并再次添加到列表中）时呈现更改。如果我在这个概念上是正确的，那么你能否建议一种方法来反映原始类型的变化，而无需重新初始化组件或修改对象引用。

例如：

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

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

如果需要更多信息，请告诉我。

Answer 1

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

  <div *ngFor="let item of list trackBy:trackByIdx">
        <md-checkbox [(ngModel)]="item.selected"></md-checkbox>
  </div>

  trackByIdx(index: number, obj: any): any {
    return index;
  }

另见

根据下面的讨论更新

当输入值改变时改变由 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);
}

Plunker example

*ngFor 原始数据类型的行为

*ngFor Behaviour on primitive data type

angular2-template

angular