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

Question

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

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>

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

Answer 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>