*ngFor 原始数据类型的行为 [英] *ngFor Behaviour on primitive data type

问题描述

我有一个对象列表，我在 HTML 页面上使用 *ngFor 显示这些对象.现在用户与 UI 交互并更改原始值之一(布尔值，从 false 到 true).

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

例如:

 
<md-checkbox [(ngModel)]="item.selected"></md-checkbox>

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

如果需要更多输入，请告诉我.

解决方案

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

 
<md-checkbox [(ngModel)]="item.selected"></md-checkbox>

 trackByIdx(index: number, obj: any): any {回报指数；}

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

根据下面的讨论更新

当输入值改变时改变ngModel绑定的布尔值，可能会导致ngModel不被更新.添加人为更改和呼号 detectChanges 可用于解决此问题.

constructor(private cdRef:ChangeDetectorRef) {}停用(索引:编号){this.list[index][0] = true;this.cdRef.detectChanges();this.list[index][0] = false;this.cdRef.detectChanges();控制台日志(this.list)；}

Plunker 示例

I have a list of objects which I am displaying using a *ngFor on the HTML page. Now the user interacts with UI and changes one of the primitive values(boolean, from false to true).

As per my understanding the *ngFor will only render the changes if the list object is modified completely i.e. removed and added again to the list. If I am right on this concept, then can you please suggest a method to reflect the change in the primitive type without re-initializing the component or modifying the object reference.

For Example:

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

User clicks on the checkbox, but the checkbox has to be ticked after certain validations from server. So let's say the checkbox needs to be unchecked and user gets a message on snack bar. So I loop through the list and modify item.selected to false. But, the change is not reflected as i modified the primitive type selected(boolean) in the object item. So how to render the new value without reloading or initializing the page again.

Please let me know if more input is required.

解决方案

If you use primitive values, you need 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;
  }

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

update according to the discussion below

Changing a boolean value bound by ngModel when the input value is changed, may cause ngModel not being updated. Adding an artificial change and callign detectChanges can be used to work around.

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 原始数据类型的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！