Angular - 复选框不维护模型值答案

【问题标题】：Angular - checkbox not maintaining model valueAngular - 复选框不维护模型值
【发布时间】：2017-10-27 18:04:12
【问题描述】：

我有一个复选框，我需要该值来反映数据模型中的布尔值并忽略用户更改它的尝试。

这是我的设置示例：

数据模型

const item = {label: 'test', active: false, selected: false};

我尝试过的带有各种输入的模板：

<li (click)="item.selected = !item.selected" [class.selected]="item.selected">
  <input type="checkbox" [ngModel]="item.active">
  <input type="checkbox" [value]="item.active">
  <input type="checkbox" [checked]="item.active">
  {{item.label}}
</li>

由于数据中的活动状态没有被更改（不是 2 路绑定），我希望复选框始终保持未选中状态，尽管用户尝试检查它。

然而，情况并非如此。用户仍然可以选中该框并且活动状态仍然为假，但所选状态会发生变化。当模型发生变化时，是什么阻止了变化检测看到复选框 DOM 状态与模型不同？

更改检测是否只观察特定的 DOM 元素，并且由于活动状态没有改变，它假定 DOM 没有受到影响？

如何进行更改检测以查看此更改并相应地利用模型值？

【问题讨论】：

标签： angular

【解决方案1】：

您可以在input 标记中添加(click)="false"。您阻止复选框在 DOM 中切换。

<input type="checkbox" [ngModel]="item.active" (click)="false">{{item.label}}

这是 Plunker Demo。

【讨论】：

这似乎最适合我的用例，而无需重新设置任何样式。谢谢
奇怪的黑客，但它的工作原理！谢谢！虽然不知道为什么。我做了一个函数，如果复选框不应该切换，它会进行一些检查并返回 false，它可以工作！我在这个函数中有副作用，所以我不能使用 [disabled]。

【解决方案2】：

我建议一起禁用复选框

<input type="checkbox" [ngModel]="item.active" disabled="true">

【讨论】：