例外:检查离子输入后表达式发生了变化

Question

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

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'undefined'.当前值:'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>

我怎样才能解决这个问题 ？

Answer 1

角度生命周期导致此错误.运行您的项目,enableProdMode如下所示.

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

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

export class AppModule {

}
enableProdMode();