如何在 Ionic 4 中使用离子输入修复 *ngFor 的 ExpressionChangedAfterItHasBeenCheckedError

Question

我目前有一个正在通过 *ngFor 的离子输入，因此它会重复多次。 当我想向 *ngFor 循环添加新记录（添加新的离子输入行）时，出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。 以前的值：'模型：abc'。 当前值：'模型：'。

这是我的代码：

.html

<ion-item *ngFor="let item of values; let i = index;">
      <ion-input formControlName="taskDetail" [(ngModel)] = "values[i].answer" type="text"></ion-input>
      <ion-icon name="remove-circle" (click)="removeTaskOption(i)" slot="end"></ion-icon>
</ion-item>

.ts

checklistCounter = [];
values = [];

constructor() {
    this.checklistCounter = Array(this.numCounter).fill(1).map((x, i) => i + 1);
    for (let i = 0; i < this.checklistCounter.length; i++) {
      let data = {
        id: i,
        answer:''
      }
      this.values.push(data);
    }
}


addNewTaskOption(){
  let data = {
    id: (this.values[this.values.length - 1].id + 1),
    answer:''
  }
 this.values.push(data);
}

removeTaskOption(i:number){
  this.values.splice(i, 1);
}

以下是一些图片供您参考：

原始 UI 的图像（单击添加或删除离子输入行之前）：

UI 图像（在第一个 ion-input 中输入“abc”后点击添加按钮：

错误图像：

我想要实现的是，即使用户在离子输入字段中输入了一些内容，如果他们想添加更多字段，这些字段也会出现在原始字段下方。 我已经阅读了其他解决方案，但他们都订阅了一项服务，而这些解决方案就是为此而设计的，所以我认为我不能将其应用于我的案例。 请帮忙！

更新：按照@GaurangDhorda 的回答设法解决了这个问题。

代码：

.html

<ion-item *ngFor="let item of values; let i = index;">
      <ion-input formControlName="taskDetail" [value]="item.answer" (change)="setQuantity($event.target.value, i)" type="text"></ion-input>
      <ion-icon name="remove-circle" (click)="removeTaskOption(i)" slot="end"></ion-icon>
</ion-item>

.ts（在新方法中添加）

setQuantity(ev:string, i:number){
     this.values[i].answer = ev;    
   }

Answer 1

对其他人的警告：被检查为“正确”的答案只是一种错误方法的解决方法，该方法最初将模板驱动形式 ( ngModel ) 与反应形式混合在一起。 ( formControlName ) 它不应被视为解决方案。

1）您要么使用模板驱动的表单，要么使用反应驱动的表单。 混合它们，不会提供真正的价值，可以被视为“代码异味”并导致错误，就像您的情况一样。 当您想要进行双向绑定时，我建议您使用[(ngModel)]就像您在问题的初稿中所做的那样。 但是请删除formControlName=taskDetail 。 （无论如何，在*ngFor使用相同的taskDetail formControlName *ngFor ）

2）使用您现在拥有的解决方案，您实际上是自己手动进行双向绑定。

3）我有两个例子展示了你的模板驱动形式和反应形式的问题：

模板驱动当我们使用ngModel时，我们需要在您的input上有一个不同的name属性

    <form>
      <ion-item *ngFor="let item of values; let i = index;">
        <ion-input [(ngModel)]="item.answer" type="text" name="answer_{{i}}"></ion-input>
        <button (click)="removeTaskOption(i)">Remove</button>
      </ion-item>

      <button (click)="addNewTaskOption()">Add answer</button>
    </form>

响应式表单响应式表单在组件类中需要编写更多内容。 在那里我们设置了一个FormArray来保存值：

    <form [formGroup]="myForm">

      <div formArrayName="taskDetail">
        <ion-item *ngFor="let item of taskDetail.controls; let i = index;">
          <ion-input [formControlName]="i" type="text"></ion-input>
          <button (click)="removeTaskOption(i)">Remove</button>
        </ion-item>
      </div>

      <button (click)="addNewTaskOption()">Add answer</button>

    </form>

export class AppComponent {

  myForm = new FormGroup({
    taskDetail: new FormArray([
      new FormControl('value 1'),
      new FormControl('value 2')
    ])
  });

  get taskDetail() {
    return this.myForm.get('taskDetail') as FormArray;
  }

  addNewTaskOption(){
    this.taskDetail.push(new FormControl('value NEWWW'));
  }

  removeTaskOption(i:number){
    this.taskDetail.removeAt(i);
  }
  ...
}

Answer 2

Add thid piece of code to your compoent.ts file...


import { Component, Input, ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';

 @Component({
   selector: 'component',
   templateUrl: 'component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })

 constructor(private cdRef:ChangeDetectorRef){} 
 ngAfterViewInit() {
    this.cdRef.detectChanges();
 }

Answer 3

生产模式下不会出现以下错误。

或者

在 ngAfterViewInit() 生命周期模式中添加您的值代码。