Angular 2，复选框双向模型绑定(bind)，不反射(reflect)组件内状态操作的选中状态

Question

根据 Plunker

我有一系列复选框:

<label><input type="checkbox" name="foo" [(ngModel)]="foo" (change)="changed()">Foo</label>
<label><input type="checkbox" name="bar" [(ngModel)]="bar" (change)="changed()">Bar</label>
<label><input type="checkbox" name="baz" [(ngModel)]="baz" (change)="changed()">Baz</label>

选中所有三个复选框后，它们都应恢复为未选中状态:

changed() {
  if (this.foo && this.bar && this.baz) {
    this.foo = false;
    this.bar = false;
    this.baz = false;
  }

  console.log(`foo: ${this.foo};bar: ${this.bar};baz: ${this.baz}`)
}

相反，我看到的是第一次它似乎工作，但随后，在选中第三个复选框时，模型更新为 false，但是该复选框在 UI 中保持选中状态，变得不同步。

现在我已经通过传递事件并自己切换目标 dom 元素的选中状态来修复它。但我想知道它一开始是如何变得不同步的？有更好的解决方案吗？

Answer 1

如果值为 false 并且您单击复选框将值更改为 true 并且事件处理程序将其更改回 false，然后 Angular 变化检测看不到变化并且不更新绑定(bind)(尽管复选框保持其 true 值)。

constructor(private cdRef:ChangeDetectorRef) {}

changed() {
  this.cdRef.detectChanges();
  if (this.foo && this.bar && this.baz) {
    this.foo = false;
    this.bar = false;
    this.baz = false;
  }
  console.log(`foo: ${this.foo};bar: ${this.bar};baz: ${this.baz}`)
}

Plunker example