在生成动态表单字段时删除行，始终删除最后一个索引答案

【问题标题】：Deleting rows while generating dynamic form fields deleting always the last index在生成动态表单字段时删除行，始终删除最后一个索引
【发布时间】：2021-05-28 12:19:24
【问题描述】：

我创建了一个动态表单域应用程序，可以在其中动态添加或删除行。一切正常，但是当我尝试删除 >=3 的行时，总是最后一行被删除。

我尝试调试应用程序，它收到了正确的删除索引，但它仍然总是删除最后一行。

如下图所示，有 3 行，我试图删除索引为 1 的行，但索引为 2 的行仍然被删除。

任何指导表示赞赏。提前致谢

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

TrackBy（双关语！）

在某些情况下，从中返回 index 就足够了，有时则不然，就像在这种情况下一样。因此，建议实际跟踪每个项目完全唯一的内容，因为我们知道 ngFor 中的索引确实会发生变化。

由于您目前没有任何足够独特的内容，我们可以添加一个额外的字段，因此当您将新项目推送到 formarray 时，我们可以添加例如一个始终唯一的 Date 字段。当然，在提交表单时，你需要过滤掉Date，但这不是什么大问题。

所以我推荐以下：

newDynamics(): FormGroup {
  return this.fb.group({
    field: '',
    operator: '',
    value:'',
    andOr:'',
    date: new Date() // add an unique identifier
  })
}

然后是trackby：

trackByFn(index, item) {
  return item.date; // always unique!
}

YOUR STACKBLITZ

任何唯一标识符都可以，例如，您可以为每个表单组推送一个 id。以上只是一种选择。

【讨论】：