错误错误:Angular 5中的ExpressionChangedAfterItHasBeenCheckedError

问题描述

我是角度5的新手，在这里我尝试根据条件禁用输入字段.

I am new to angular 5 ,Here I am trying to disable a input field based on the condition.

 <div *ngIf="isOTPFieldEnabled" class="email-field-width">
  <mat-form-field class="email-field-width">
   <mat-label>  Enter OTP</mat-label>
   <input [attr.disabled]="isDiableSignInOTPField" #OTP (click)="getOTP(OTP.value)" [formControl]="signInOTP"  maxlength="6" matInput required placeholder="OTP">
  <mat-hint [ngStyle]="{color: hintColor}">{{hintOTP}}</mat-hint>
 </mat-form-field>
 </div>

页面加载后，该div对用户不可见.一旦*ngIf="isOTPFieldEnabled"值满足 TRUE ，它将对用户可见.并且在 getOTP()方法中验证了用户输入后，我想禁用此输入字段.

After the page load this div is not visible to the user .Once the *ngIf="isOTPFieldEnabled" value is meets TRUE it will be visible to the user.And once the user input validated in the getOTP() method I want to disable this input field .

为此，我已经设置了[attr.disabled]功能正常，但出现了我在标题中提到的错误.

For that I have set [attr.disabled] the functionality is working fine but I got the error as I mentioned in my title.

详细错误:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: true'. Current value: 'mat-focused: false'.
    at viewDebugError (core.js:7290)
    at expressionChangedAfterItHasBeenCheckedError (core.js:7278)
    at checkBindingNoChanges (core.js:7380)
    at checkNoChangesNodeDynamic (core.js:10263)
    at checkNoChangesNode (core.js:10233)
    at debugCheckNoChangesNode (core.js:10833)
    at debugCheckRenderNodeFn (core.js:10787)
    at Object.eval [as updateRenderer] (CheckoutComponent.html:159)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:10776)
    at checkNoChangesView (core.js:10131)

更新:

export class CheckoutComponent implements OnInit {
          isOTPFieldEnabled:boolean=false;
          isDiableSignInOTPField:boolead =false;

           ngOnInit(){}

          emailVerified(){
                         this.isOTPFieldEnabled=true;
                         }
          getOTP(OTP){
                      if(OTP){
                               this.isDiableSignInOTPField=true;
                              }
         }

}

推荐答案

查看生命周期挂钩文档将ngOnInit()更改为ngAfterContentInit().可能会对您有帮助.

Looking at the lifecycle hooks documentationChange ngOnInit() to ngAfterContentInit().It might help you.

ngAfterContentInit(){
      this.emailVerified();
      this.getOTP(OTP);
     }

    this.emailVerified() {
       this.isOTPFieldEnabled=true;
     }

    this.getOTP(OTP) {
        if(OTP) {
            this.isDiableSignInOTPField=true;
        }
     }

这篇关于错误错误:Angular 5中的ExpressionChangedAfterItHasBeenCheckedError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！