ng-reflect-model显示正确的值但不反映输入

Question

遇到一个非常奇怪的问题,我的应用程序在一个非常具体的用户案例中行为不端.我有一个门户网站,用户可以在其中添加问题和答案,然后进行编辑.在这种情况下,当我删除一个集合(q + a)然后尝试添加它时,模型会更新,但我的视图从占位符获取值并更新自身.在这里,我只是拼接并推送数组中的值并使用ngFor进行渲染.最后一个元素是一个虚拟元素,用于输入向上推的值.

如果有任何意义,请附上屏幕截图.

您可以看到,对于文本框,ng-reflect-model显示正确的问题,但元素本身显示占位符文本.

Answer 1

显然这个问题是由于Angular无法正确跟踪我的数组元素而引起的.我发现这很困难.所以只需在我的ngFor中添加一个trackBy属性,我就能解决这个问题.

将此添加到我的组件:

customTrackBy(index: number, obj: any): any {
  return index;
}

然后在模板中:

<div class="margin-bottom-15"
     *ngFor="let assessment of language.assessments; trackBy:customTrackBy">

所以基本上我要求angular通过索引跟踪数组中的元素.它解决了这个问题.

这里评估是每个问答集的模型.

Answer 2

如果您使用嵌套的 ngFor，则名称属性可能不唯一。它应该是独一无二的。因此，请在name属性后加上 for 循环的索引，以使其唯一。

 <form #f="ngForm" validate>
      <div *ngFor="childItem of parentArray; index as pIndex;">
           <div *ngFor="childArray of childItem.parameters;index as cIndex;">
                 First Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.firstname" required>
                 Last Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.lastname" required>

                <button type="button" [disabled]="!f.valid"
                (click)="submitForm();"> Submit  </button>
            </div>
       </div>
 </form>