Angular 8中如何根据ID而非索引删除*ngFor渲染的行？

我明白你的问题了——你现在用*ngFor渲染项目列表，但因为数据的id和循环索引不匹配，没法正确根据id删除对应行。而且你当前的代码里还有几个小问题，比如*ngFor的语法错误，以及通过DOM获取值的方式不太符合Angular的最佳实践，我来一步步帮你修正：

第一步：修正HTML模板，直接绑定项目ID到删除操作 #

首先，你的*ngFor语法写错了，let i of index应该改成let i = index。然后，我们不需要用隐藏input或者DOM元素来存ID，直接给每个项目的删除按钮绑定对应的p.id即可：

<div class="projectsContainer container">
  <li class="flex-row bb pt5 pb5 flex-noshrink mh20" *ngFor="let p of Projects.projects.data; let i = index">
    <span class="flex2">{{i}} {{p.code}}</span>
    <!-- 添加删除按钮，点击时传入当前项目的id -->
    <button (click)="deleteProject(p.id)" class="delete-btn">删除</button>
  </li>
</div>

第二步：重构删除函数，接收ID参数并同步本地数据 #

原来的函数通过DOM获取ID的方式很脆弱，我们直接把项目ID作为参数传入删除函数，调用接口删除后，还要把本地数组里对应的项目移除，这样视图会自动更新：

token = JSON.parse(window.localStorage.getItem('token'));

deleteProject(projectId: number): void {
  this.httpClient.delete(`http://test.url${projectId}?token=${this.token.token}`)
    .subscribe(
      (data) => {
        console.log("DELETE PROJECT DONE", data);
        // 删除成功后，更新本地数据数组
        this.Projects.projects.data = this.Projects.projects.data.filter(item => item.id !== projectId);
      },
      (error) => { console.log("DELETE PROJECT FAILED", error) }
    );
}

为什么这样更可靠？ #

• 避免了直接操作DOM：Angular的核心是数据驱动视图，直接绑定数据ID比通过DOM元素取值更稳定，不会因为列表排序、过滤导致索引和ID不匹配的问题。
• 同步本地数据：调用接口成功后用filter方法移除对应ID的项目，*ngFor会自动检测数组变化并更新视图，无需手动操作DOM。

这样修改后，你就能精准地根据每个项目的id删除对应的行了，完全不受循环索引的影响~

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