将ngModel绑定到相反的值

Question

我获取了一些数据并设置了复选框，并希望与[（ngModel）]绑定。但是根据逻辑，我需要显示一个相反的值。

<input type="checkbox" [(ngModel)]="!value" />
value: {{value}}

为什么必须单击两次才能看到更改？

示例：https://stackblitz.com/edit/angular-q3boip

Answer 1

一种解决方案是为相反的值定义一个getter / setter属性：

get notValue(): boolean {
  return !this.value;
}

set notValue(val: boolean) {
  this.value = !val;
}

并将ngModel绑定到该属性：

<input type="checkbox" [(ngModel)]="notValue" />

有关演示，请参见this stackblitz。

---

另一种解决方案是拆分[(ngModel)]绑定：

<input type="checkbox" [ngModel]="!value" (ngModelChange)="value = !$event" />

有关演示，请参见this stackblitz。