将值分配给显示错误的输入字段：ExpressionChangedAfterItHasBeenCheckedError

Posted 2023-02-22

【中文标题】将值分配给显示错误的输入字段：ExpressionChangedAfterItHasBeenCheckedError

【英文标题】：Assigning value to input field showing error: ExpressionChangedAfterItHasBeenCheckedError

【发布时间】：2018-02-09 06:07:46

【问题描述】：

我正在从本地存储中拆分一个字符串并将其放入数组中，如下所示：

file.ts

getskills: Array<string> = [];
// a,b,c is the value in getskills

  ionViewDidLoad() 
    this.getskills  = JSON.parse(localStorage.getItem("profskill")).split(',');
    console.log(this.getskills[1]);
    // The answer is b in  console window
  

现在在我的file.html 中，我有一个输入字段，我希望它的值为this.getskills[1]，但是当我分配它时，我得到以下错误：

运行时错误 ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：''。当前值：'b'。

file.html参考代码：

<ion-item>
  <ion-input [(ngModel)]="skills" type="text" #skills1 (keyup.enter)="save(skills1.value); skills1.value='' " placeholder="skills" [value] = "getskills[0] ? getskills[0]: ''"></ion-input>
</ion-item>

如何将该值分配给我的输入字段？

【参考方案1】：

如果你的更新是在 Angular 检查视图之后发生的，就会发生这种情况。

快速而肮脏的方式是；

注入 ChangeDetectorRef

constructor(private changeDetectorRef:ChangeDetectorRef)

ionViewDidLoad() 
 this.getskills  = JSON.parse(localStorage.getItem("profskill")).split(',');
    console.log(this.getskills[1]);
    // The answer is b in  console window
     this.changeDetectorRef.detectChanges();
    // run the change detection manually
  

但解决此类问题的正确方法是将您的更新(ionViewDidLoad) 移到更好的时刻。

不要忘记，当您对模型（`getskills'）进行更改时，您需要确保 Angular 不会这样做。

编辑：

ionViewDidLoad() 
     this.skills  = JSON.parse(localStorage.getItem("profskill")).split(',')[0];
        console.log(this.getskills[1]);
        // The answer is b in  console window
         this.changeDetectorRef.detectChanges();
        // run the change detection manually
      

和

<ion-item>
  <ion-input [(ngModel)]="skills" type="text" #skills1 (keyup.enter)="save(skills1.value); skills1.value='' " placeholder="skills"></ion-input>
</ion-item>

【讨论】：

错误消失了，但仍然没有加载值，我正在使用此代码[value] = "getskills[0] ? getskills[0]: ''"，我可以在我的控制台中看到结果console.log(this.getskills[0]);