ngModel强制获取属性两次

Question

我有一个简单的组件来显示项目列表。我有一个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 我创建了上面的例子。如果您单击其中一个复选框，则可以看到＆＃34; test＆＃34;正在控制台上显示6次。

有什么想法吗？

此致

利奥

Answer 1

这是因为角度在更新视图后再次检查模型以验证它没有被更改。这样做是为了确保模型的稳定性，并且更新视图不​​会再次更新模型并启动无限循环。如果angular发现更新后模型已更改，则会抛出ExpressionChangedAfterItHasBeenCheckedError错误。

请注意，这只发生在开发模式中。

进一步阅读：see this article

Answer 2

仅在开发模式中调用两次，以验证moel未被更改。如果在第二次调用中更改模型，则会抛出错误。因此，您可以在开发阶段检测错误的案例。在生产模式中构建捆绑包时，它将调用一次。