我有一个简单的组件来显示项目列表。我有一个 ngfor 循环，里面有一个带有 [(ngModel)] 的复选框。一切都按预期进行。
<div *ngFor="let armor of armorList">
<input type="checkbox" [(ngModel)]="armor.obtained" />
<span>{{armor.name}}</span>
</div>
我创建了一个名为 name 的 get 属性，如下所示。 (我只是为了示例而删除了实现本身)
get name(): string {
console.log("test");
return "test";
}
我认为奇怪的是，如果我单击列表中一项的复选框，则列表中的所有项目都会调用此 get 属性两次。我认为根本不应该调用它，因为我只是更新一项的一项属性，与其余项无关。
https://plnkr.co/edit/KqDpuw1QeXOCFNODbqiW?p=preview 我已经创建了上面的示例。如果单击其中一个复选框，您可以看到“test”在控制台上显示了 6 次。
有什么想法吗？
问候
狮子座
最佳答案
这是因为 Angular 在更新 View 后再次重新检查模型以验证它没有更改。这样做是为了确保模型的稳定性，并且更新 View 不会再次更新模型并启动无限循环。如果 Angular 发现更新后模型发生了变化，则会抛出 ExpressionChangedAfterItHasBeenCheckedError 错误。
请注意，这只发生在开发模式下。
进一步阅读:see this article
关于javascript - ngModel 强制获取属性两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48521139/