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

Posted 2023-02-22

【中文标题】例外：在检查离子输入后，表达式发生了变化

【英文标题】：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的可能重复

【参考方案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() 的内容包装到超时中，或在其他地方调用它。顺便问一下，你怎么称呼它？