Angular+TypeScript如何通过传参正确删除数组中选中的指定对象

问题修复方案 #

你当前代码的核心问题是未使用传入的id参数匹配目标对象，且indexOf对比对象时只会校验引用地址是否一致，你传入的展开后新对象永远无法匹配到数组内的原有元素，因此无法拿到正确下标。

修正后的TypeScript删除方法

deleteContact(id: number) {
  // 通过传入的id匹配数组中对应联系人的下标
  const index = FORMULARLIST.findIndex(item => item.id === id);
  if (index > -1) {
    FORMULARLIST.splice(index, 1);
    // 可选：删除完成后清空当前选中联系人，避免页面残留无效信息
    this.selectedformular = null;
  }
  console.log(FORMULARLIST);
}

模板部分说明

你现有模板的传参逻辑是正确的，点击删除按钮时已经将当前选中联系人的idselectedformular.id传入方法，无需调整。

其他可优化点

• 模板内所有input的id属性均为name重复，会导致label点击关联输入框的功能失效，建议每个input设置唯一id
• 删除按钮的类名btn btn- danger中间多了多余空格，修正为btn btn-danger即可正常加载样式

内容的提问来源于stack exchange，提问作者max_flu