取消选中 Angular 2 ngModelChange 事件中的复选框答案

【问题标题】：Uncheck checkbox in Angular 2 ngModelChange event取消选中 Angular 2 ngModelChange 事件中的复选框
【发布时间】：2017-08-29 09:18:36
【问题描述】：

我们在 Angular 2 应用程序中有一个表单。表单有一个复选框。在某些情况下，选中复选框是非法的。当用户选中复选框时，我们希望显示错误消息并取消选中复选框。

这几乎可行。在我们的事件处理程序中，我们检查条件、警告用户并将复选框变量设置回 false。不幸的是，复选框仍然处于选中状态。

我们看到的事件顺序是这样的：

用户点击复选框。
我们的checkbox 变量变为真。
我们的事件处理程序被调用。
显示警报（目前使用alert）
警报被解除
checkbox 变量被我们的代码设置为 false。
我们的事件处理程序已完成。
复选框在浏览器中被选中

模型 (checkbox) 仍然是假的，但用户看不到它。如何取消选中复选框在实际选中后（而不是“即将被选中”）？

这是Plunkr demonstrating the issue。

【问题讨论】：

没有代码很难分辨...
对。我添加了一个 Plunkr 来展示这种行为。
您需要将this.checkbox=false 包装为setTimeout，但是为什么不禁用输入而不是实时取消选中呢？
在这种情况下，用户会想知道为什么复选框被禁用，这从其余数据中并不明显。

标签： angular

【解决方案1】：

原答案：

用setTimeout 包裹你的this.checkbox=false：

@Component({
  selector: 'my-app',
  template: `
    <label>
        <input type='checkbox' [(ngModel)]='checkbox' (ngModelChange)='onCheckboxChange()'>    Can't be checked
    </label>
    <pre>{{checkbox}}</pre>
  `,
})
export class App {
  name:string;
  checkbox: boolean;
  constructor() {
    this.checkbox = false;
  }
  
  onCheckboxChange() {
    if (this.checkbox) {
      setTimeout(()=>{
        this.checkbox = false;
      })
    }
  }
}

plunkr

对于未来的读者：

你可以找到解释为什么这个问题需要setTimeout：

Angular 2 - Checkbox not kept in sync

【讨论】：

我以为我们摆脱了这种行为。我猜不会。我会试试这个，谢谢。

【解决方案2】：

你需要分享一些代码，但根据描述问题似乎是 ngModel 取消选中复选框使用这样

<input type="checkbox" [checked]="your condition">

【讨论】：

我添加了一个 Plunkr 来演示这个问题