angular - 取消选中 Angular 2 ngModelChange 事件中的复选框

Question

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

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

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

1. 用户点击复选框。
2. 我们的 checkbox 变量变为 true。
3. 我们的事件处理程序被调用。
4. 显示警报(现在使用 alert)
5. 警报已解除
6. checkbox 变量被我们的代码设置为 false。
7. 我们的事件处理程序已完成。

8. 复选框在浏览器中被选中

   模型(checkbox)保持为 false，但用户看不到它。我如何才能取消选中复选框之后它实际被选中(而不是“即将被选中”)？

   这是一个Plunkr demonstrating the issue .

Answer 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

对于 future 的读者:

您可以找到有关为什么此问题可能需要此 setTimeout 的解释:

Angular 2 - Checkbox not kept in sync