错误错误：Angular 5 中的 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：ERROR Error: ExpressionChangedAfterItHasBeenCheckedError in Angular 5错误错误：Angular 5 中的 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2019-02-15 17:43:07
【问题描述】：

我是 angular 5 的新手，在这里我试图根据条件禁用输入字段。

 <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() 方法中验证了用户输入，我想禁用此输入字段。

为此，我设置了[attr.disabled]，该功能工作正常，但我收到了标题中提到的错误。

详细错误：

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;
                              }
         }

}

【问题讨论】：

isOTPFieldEnabled 值如何更改？是@input 属性吗？添加您的 .ts 代码
最初将值设置为 isOTPFieldEnabled:boolean = false;当我想显示该字段时 this.isOTPFieldEnabled=true; @Sujay
我知道了，但是您是通过其他组件更改它吗？喜欢使用@input属性
添加您的.ts 代码
不是来自同一组件本身@Sujay

标签： html css typescript angular5

【解决方案1】：

查看生命周期钩子文档将ngOnInit() 更改为ngAfterContentInit()。它可能会对你有所帮助。

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

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

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

【讨论】：