添加到 Reactive Forms Array Angular 的开头答案

【问题标题】：Add to the beginning of Reactive Forms Array Angular添加到 Reactive Forms Array Angular 的开头
【发布时间】：2017-11-10 18:09:15
【问题描述】：

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 指南来构建这个示例。

【问题讨论】：

“这里复制粘贴的代码太多了” - 然后将其缩减为minimal reproducible example，这是在这里提出问题的工作的一部分。跨度>
它的 Angular 在这里谈论的最小示例确实需要这么多代码哈哈
您阅读过文档吗？有insert 方法可以指定index。
@developer033 我正在使用那个插入方法，你可以在 plunker 中 app.js 的第 83 行看到这个。它可以很好地插入模型，只是渲染的视图没有反映模型的状态。我所说的模型是指 FormGroup 和相关的 FormArray。
非常有趣的问题。推送工作正常。你检查过角度 git hub 问题吗？

标签： forms angular angular-reactive-forms

【解决方案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

【讨论】：

谢谢这解决了这个问题，我不知道trackBy
不客气，很高兴我能帮上忙！ :) 是的，当我们处理原始类型时，通常（仅）需要 trackBy ，但事实并非如此。但显然，当您在数组的开头插入值而不是仅仅在数组的末尾推送一个新值（没有 trackBy 也可以）时，Angular 很难跟踪索引。这实际上很有趣:)