添加到Reactive Forms Array Angular的开头

Question

请参阅相关的plunker

https://plnkr.co/edit/f0BxpinhuqVz8o6IIFaL?p=preview

// stack overflow makes you put code if a plunker is linked but it is too much code to copy paste here it would just look messy so I a am putting this comment instead.

如果你运行它然后单击添加按钮，则会向数组中添加一个新条目，但表单视图不会反映表单状态，而是第一个条目重复，最后一个条目消失。

如果有人对我做错了什么有任何想法或指导，我将非常感激，因为我一直坚持看似简单的任务。

我尽可能地遵循官方的Angular Reactive Forms指南来构建此示例。

由于

Answer 1

似乎Angular无法跟踪formArray中对象的索引。这可以通过使用trackBy来解决。使用函数将其添加到迭代中：

<div *ngFor="let detail of detailArray.controls; let i=index; trackBy:trackByFn" [formGroupName]="i">

并在组件中：

trackByFn(index: any, item: any) {
  return index;
} 

PLUNKER