将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。