例外：在检查离子输入后，表达式发生了变化答案

【问题标题】：EXCEPTION: Expression has changed after it was checked ion-input例外：在检查离子输入后，表达式发生了变化
【发布时间】：2018-06-03 20:50:19
【问题描述】：

我正在尝试创建一个编辑，所以我创建了一个表单，然后我分配了值。但我得到一个错误

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改检查后。以前的值：'未定义'。当前值： 'XXXXXX'。

这是我的edituser.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/Storage';

/**
 * Generated class for the EdituserPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-edituser',
  templateUrl: 'edituser.html',
})
export class EdituserPage {

    fullname : any;
    Deskripsi : any;
    phone:any;
    Email:any;
    user_id:any
  userData = {"username": "","password": "", "fullName": "","Email": "", "Deskripsi" : "", "Phone":""};

  constructor(public navCtrl: NavController, public navParams: NavParams,public storage: Storage) {

  }
ionViewDidLoad() {
      this.storage.get('userData').then((val) => {
               this.fullname = val.fullname;
               this.Deskripsi = val.Deskripsi;
               this.phone = val.phone;
               this.Email = val.Email;
               this.user_id = val.user_id;
        });
  }

  update(){
        console.log(this.userData);
  }


}

这是我的表单edituser.html

<ion-list margin-top>
    <ion-item>        
            <ion-label> <ion-icon name="person"></ion-icon></ion-label>
            <ion-input [(ngModel)]="userData.fullname" value="{{fullname}}" type="text"></ion-input>
    </ion-item>

     <ion-item>        
            <ion-label> <ion-icon name="md-phone-portrait"></ion-icon></ion-label>
            <ion-input  [(ngModel)]="userData.phone" value="{{phone}}"  type="text"></ion-input>
    </ion-item>

    <ion-item>        
            <ion-label> <ion-icon name="md-mail"></ion-icon></ion-label>
            <ion-input  [(ngModel)]="userData.Email" value="{{Email}}"  type="text"></ion-input>
    </ion-item>

    <ion-item>        
            <ion-label> <ion-icon name="md-megaphone"></ion-icon></ion-label>
            <ion-textarea  [(ngModel)]="userData.Deskripsi" value="{{Deskripsi}}"  type="text"></ion-textarea>
    </ion-item>

    <ion-item>        
        <button ion-button color="secondary" (click)="update();" float-right>Update</button>
    </ion-item>

</ion-list>

我该如何解决这个问题？

【问题讨论】：

Angular 2 - Expression has changed after it was checked的可能重复

标签： angular ionic-framework ionic3

【解决方案1】：

由于角度生命周期导致此错误。使用enableProdMode 运行您的项目，如下所示。

在您的 app.module.ts（您定义项目引导和其他组件注册的主要组件）中

import { Component, NgModule, enableProdMode } from "@angular/core";

export class AppModule {

}
enableProdMode();

【讨论】：

enableProdMode(); 不只是不输出错误吗？我不认为这是一个可行的修复，错误仍然会发生，但由于启用了生产模式，它只是没有将其打印到控制台。
正如@moritzg 所说，这既不是修复也不是解决方法。它只是隐藏打印的错误。

【解决方案2】：

ionViewDidLoad 似乎不是正确的钩子。这听起来好像视图已经完成加载，这意味着所有绑定都已设置。之后您更改绑定，这可能会导致此问题。

您应该将您的 storage.get 移动到 ngOnInit 生命周期挂钩

【讨论】：

【解决方案3】：

这是一个生命周期错误。 Angular 告诉您，在其生命周期检查期间，您更改了一个变量，但它丢失了。

为避免这种情况，您可以将 ionViewDidLoad() 的内容包装到超时中，或在其他地方调用它。顺便问一下，你怎么称呼它？

【讨论】：