javascript - 为什么 *ngFor 中的 mat-checkbox 没有从模型中获取最新的 [checked] 值？

Question

<ng-container *ngFor="let item of items">
     >>>>>>>>LINE 2>>>>>>>>>> {{item.checkedOrUnchecked}}
     <mat-checkbox [checked]="item.checkedOrUnchecked"></mat-checkbox>

上面代码中的第 2 行始终与其他地方所做的更改同步。

但是，mat-checkbox 不会更新 true/false。它在这里失去了上下文。即使 *ngFor 为每次迭代创建子上下文，当 LINE 2 能够选择最新更新时，为什么 mat-checkbox 无法同步。

我注意到的一件事是，如果 item.checkedOrUnchecked 的初始值为 false，并且如果将其更改为 true，则将选中 mat-checkbox。但是，进一步将 item.checkedOrUnchecked 从 true 切换为 false 或 false 切换为 true 不会产生任何影响。

可以在此处复制问题 https://stackblitz.com/edit/angular-material2-checkbox-issue-zyjhd3

请有人给我建议。

Answer 1

更改此:

[checked]="item.checkedOrUnchecked"

至

[(ngModel)]="item.checkedOrUnchecked"

<小时/>

这是它的工作示例，请看一下:

https://stackblitz.com/edit/angular-material2-checkbox-issue

<小时/>

您的演示存在问题:https://stackblitz.com/edit/angular-material2-checkbox-issue-zyjhd3

问题:

1) *ngFor="let property of properties;let i =index;"

中缺少 let i =index;

2)所以没有从这里传递正确的值saveProperty($event, i)

3) this.properties[index][key] = property[key] ， property[key] 是 string 不是 boolean ，所以需要转换为boolean

已解决:https://stackblitz.com/edit/angular-material2-checkbox-issue-tbutvp