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-to-true并没有任何影响。

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

Plz可以有人建议。

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）从let i =index;

中遗漏*ngFor="let property of properties;let i =index;"

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

3）this.properties[index][key] = property[key]，property[key]为string而非boolean，因此需要转换为布尔值

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

为什么mat-checkbox在* ng里面没有从模型中获取最新的[checked]值？

1 个答案: