角度表删除操作答案

【问题标题】：Angular Table Delete Operation角度表删除操作
【发布时间】：2021-11-22 21:26:53
【问题描述】：

在我的应用程序中，我有一个列表，用户可以在其中添加和删除元素。我的问题是，当我单击一个元素（它可以在中间，在末尾等）时，它会删除列表的第一个元素。当我刷新页面时，我可以看到以前“删除”的元素。就像我没有删除任何东西一样。这是我的代码。它有什么问题，我应该如何解决？

HTML：

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

TS：

deleteWorkItem(row: IProduct, index: number) {

  let supplierProduct: ISupplierProduct = {
    Supplier: {
      SupplierId: this.SupplierId
    },
    Product: {
      ProductId: row.ProductId
    }
  };

  this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
    disableClose: false
  });
  this.confirmDialogRef.componentInstance.confirmMessage = 'Ürünü silmek istiyor musunuz?';
  this.confirmDialogRef.afterClosed().subscribe(result => {
    if (result) {
      this._service.update('Supplier/DeleteSupplierProduct', supplierProduct).subscribe(response => {
        this._customNotificationService.Show('Ürün silindi', 'Tamam', 2);
      });
      let tempData = this.dataSource.data.slice(0);
      tempData.splice(index, 1);
      this.dataSource = new MatTableDataSource(tempData);
      this.EditIndex = undefined;

      this._products = this.dataSource.data;
      this.ProductChange.emit(this._products);
    }
  });


}

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

您似乎没有将index 传递给deleteWorkItem 方法。

您需要在*ngFor 中声明一个模板变量，如下所示：

<div *ngFor="let row of data; let i = index">
  ...
  <button mat-icon-button>
    <mat-icon (click)="deleteWorkItem(row, i)">block</mat-icon>
  </button>
</div>

【讨论】：

谢谢，现在删除操作可以了。但是，当我刷新页面时，我似乎没有删除任何内容。
这可能与您如何处理删除本身有关。你如何填充dataSource？它来自后端吗？如果是这样，您还需要将此删除操作持久化到后端。