Angular 无法删除网格列表元素答案

【问题标题】：Angular Can Not Delete Grid List ElementAngular 无法删除网格列表元素
【发布时间】：2022-01-27 21:38:02
【问题描述】：

在我的代码中，我有一个网格，用户可以在其中输入元素。用户可以稍后编辑或删除他添加的元素。问题是，当我尝试从中间或末尾删除一个元素时，网格顶部的元素会被删除，而不是我想要的那个。这是我的代码。它有什么问题，我应该如何解决？

HTML：

        <button mat-icon-button>
            <mat-icon (click)="deleteWorkItem(row, i)">block</mat-icon>
        </button>

TS：

dataSource: MatTableDataSource<IMaterialPlanParameter>;
  deleteWorkItem(index: number) {
    let tempData = this.dataSource.data.slice(0);
    tempData.splice(index, 1);
    this.dataSource = new MatTableDataSource(tempData);
    this.EditIndex = undefined;
  }

【问题讨论】：

你没有显示 index/i 来自哪里。总是 0 吗？

标签： javascript html angular typescript

【解决方案1】：

试试这个，我使用 lodash 库来克隆数据，或者您可以使用保存数据的变量，但我不清楚为什么以及您在 html deleteWorkItem 中传递的内容以及为什么不调用两者.ts 中的元素

   deleteWorkItem(row, index) {
    let tempData = clone(this.dataSource.data);
    tempData.splice(index, 1);
    this.dataSource = new MatTableDataSource<IMaterialPlanParameter>(tempData);
  }

如果这不起作用，我建议您使用交互式角度编辑器创建一个示例。

【讨论】：