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

Question

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

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

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

感谢任何指导。提前致谢

Answer 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。以上只是一种选择。

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

Deleting rows while generating dynamic form fields deleting always the last index

angular

angular-reactive-forms