1

请查看示例: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'.

我应该怎么做才能摆脱错误?

4

1 回答 1

3

您应该删除 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>
于 2018-05-16T14:54:57.100 回答