mat-checkbox не проверяет, ложно ли условие (только при двойном щелчке)

Question

У меня есть объект, переменная которого должна быть противоположна состоянию флажка.

enitity.enabled = true

Установлен флажок «пометить для удаления» предмета. Если вы отметите и отправите форму, помеченный элемент будет удален.

Имея это в виду, флажок в точности такой:

<mat-checkbox [(ngModel)]="!entity.enabled">{{!entity.enabled}}</mat-checkbox>

По какой-то причине значение enitity.enabled изменяется только при втором клике.

Я много искал решение или, если это ошибка, ничего не нашел, я пришел сюда за вашей помощью.

Есть идеи, как решить эту проблему?

Пример здесь

Answer 1

Вы не можете использовать оператор отрицания с ngModel.

<mat-checkbox [(ngModel)]="entity.enabled">{{!entity.enabled}}</mat-checkbox>

Попробуйте это так.

Другой подход заключается в реагировании на событие щелчка или изменения

HTML

<mat-checkbox [checked]="entity.enabled" (change)="onChange()">{{!entity.enabled}}</mat-checkbox>

машинопись

private onChange(): void {
   this.entity.enabled = !this.entity.enabled;
}

private onClick(): void {
  this.entity.enabled = !this.entity.enabled;
}