При использовании отключенных привязок ngModel и ngModelChanged создается ExpressionChangedAfterItHasBeenCheckedError

Question

Пожалуйста, смотрите образец: https://stackblitz.com/edit/angular-bvcrcz

У меня есть <mat-checkbox [ngModel]="row.IsVerified" [disabled]="row.IsVerified" (ngModelChange)="setTrue()"></mat-checkbox> в моем шаблоне.

Метод setTrue выглядит следующим образом: setTrue = () => { ObservableOf(67).subscribe(_ => { this.row.IsVerified = true; // This throws a ExpressionChangedAfterItHasBeenCheckedError!!! }); }

Я пытаюсь достичь: щелкнув по флажку не следует немедленно изменять значение ngModel , но вместо этого он должен инициировать вызов на сервер (для обновления значения на сервере) и, после успешного кода ответа установите ngModel на true.

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

Однако я получаю сообщение об ошибке (в консоли): ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

Что я должен сделать, чтобы избавиться от ошибки?

Answer 1

Вы должны удалить привязку на вашем HTML:

<mat-checkbox [disabled]="row.IsVerified" (ngModelChange)="setTrue()"></mat-checkbox>

Поймите это: привязка данных запускает обнаружение изменений. Что происходит, когда вы активируете это обнаружение изменений, когда нажимаете на флажок, а затем запускаете функцию с ngModelChange, которая обновляет переменную.

Опять же, это вызывает обнаружение изменений, и Angular снова проверяет выражение и видит, что оно изменилось: выдает ExpressionChangedAfterItHasBeenCheckedError.

Вы в основном делаете одну и ту же работу дважды, создавая проблему.

РЕДАКТИРОВАТЬ После комментариев к этому ответу, решение будет

<mat-checkbox [checked]="!!row.isVerified" [disabled]="row.IsVerified" (ngModelChange)="setTrue()"></mat-checkbox>