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>

Answer 3

否则您可以使用

*ngFor="childItem of parentArray; index as i;"

和

[attr.data-target]="'#test' + i"

和

name="test{{i}}