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：表达式在检查后发生了变化。以前的价值：＆＃39;＆＃39;。当前价值：＆＃39; b＆＃39;。

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远离它。

EDIt：

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>

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

1 个答案: