angular - 使用原始和有效标志时出现错误 "Expression has changed after it was checked"

Question

在 Angular documentation我找到了an example使用原始和有效的标志。但是当我将它们分配给组件的属性时，我得到一个错误“Expression has changed after it was checked”。为什么会这样？你怎么能解决这个问题？

可以看an example

Answer 1

您尝试修改属性 isValid 的代码存在问题通过检查相同的原始控制，它会给你错误

   <text-box
        formControlName="emailControl"
        [(ngModel)]="formData.email"
        [isValid]="emailControl.pristine">
    </text-box>

基本上，您正在尝试通过自我控制来修改控制的值，这会导致问题并给您带来错误。

你可以检查一下，我创建了我自己的验证控件，检查这里:
Angular Custom Validation Component ，这可能满足您的要求。

您收到错误是因为您正在将值与 html 控件绑定(bind)，并且这些值在 angular 的更改检测周期中发生更改。大多数情况下，当属性值为 ParentComponent 时会发生此错误。由 ChildComponent 更改.

在解决方案中，它会像这样从父组件强制更改检测

export class AppComponent {

    constructor(private cd: ChangeDetectorRef) {
    }

    ngAfterViewInit() {
        this.cd.detectChanges();
    }
    //rest of the code 
}

检查这个: Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error