Angular 2,复选框双向模型绑定,dom不反映在组件内操纵状态时检查的状态

2023年2月8日 218次阅读

每
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元素的已检查状态来修复它.但我想知道它首先会如何变得不同步？有更好的解决方案吗？

最佳答案 如果值为false并且您单击复选框以将值更改为true并且事件处理程序将其更改回false,则Angular更改检测不会看到更改并且不会更新绑定(复选框保持其真实值虽然).

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

点赞