删除行-当索引返回-1时，总是删除最后一行

Question

我的Angular应用程序中有一个反应式表单，其中一个问题允许用户添加或删除行。每行都会有一个删除按钮。我面临的问题是，当我单击特定项目上的删除按钮时，它将代替最后一行。我已经在函数中完成了断点，它显示索引为-1，这意味着最后一项将被删除。

delete_communityList_row(id) {
  const index = this.Form.value.communityList.indexOf(id);
  this.Form.value.communityList.splice(index, 1);
}

单击删除按钮后，“ id”将返回我单击的行的id，因此我无法完全显示出问题所在。这是console.log输出，它返回对象数组。

Answer 1

在您的代码communityList中，属性保存对象集合，并且您正在检查id（可能是字符串或数字）的索引，该索引在数组中不作为元素存在（它是对象的属性值），因此始终返回-1。根据{{​​3}}文档，如果起始值是负数，则从末尾开始计数，就像array.length - n（-1表示最后一个索引）。

您可以使用Array#splice方法检查属性值来获取索引，该方法遍历数组并在回调返回true时返回索引。

const index = this.Form.value.communityList.findIndex(o => o.id === id);

最终代码：

delete_communityList_row(id) {
  const index = this.Form.value.communityList.findIndex(o => o.id === id);
  if(index !== -1) this.Form.value.communityList.splice(index, 1);
}

---

仅供参考：：如果您是从模板（使用*ngFor生成）中调用方法，则可以传递index而不是id，并且会简单得多。