javascript - 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我已经创建了上面的示例。如果单击其中一个复选框，您可以看到“test”在控制台上显示了 6 次。

有什么想法吗？

问候

狮子座

Answer 1

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

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

进一步阅读:see this article