从 Angular 中的 mat-table 中显示的数组列表中删除对象

Question

从垫子-table我想删除一行。这是我的按钮和（单击）方法的样子：

    <mat-cell *matCellDef="let element; let i = index">
          <button mat-raised-button color="warn" (click)="deleteApplication(i)">
               Delete
          </button>
     </mat-cell>

这是我的函数 component.ts:

    deleteApplication(index: number){
    if (index > -1) {
        let removeIndex = this.applicationData.Items;
            this.applicationData.Items.splice(removeIndex[index], 1);
            removeIndex = new MatTableDataSource(removeIndex);
            console.log('new array:', removeIndex.filteredData);
       }
    }

数据源是我在 AWS 上托管的 DynamoDB 数据库中的数组列表。这是它在我的控制台中的样子：

    {Items: Array(8), Count: 8, ScannedCount: 8}
    Count: 8
    Items: Array(8)
    0: {completed: false, candidate: "1", application: Array(3), timestamp: 1569837830615}
    1: {completed: false, candidate: "2", application: Array(3), timestamp: 1569837830615}
    2: {completed: false, candidate: "3", application: Array(3), timestamp: 1569837830615}
    3: {completed: false, candidate: "4", application: Array(3), timestamp: 1569837830615}
    4: {completed: false, candidate: "5", application: Array(3), timestamp: 1569837830615}
    5: {completed: false, candidate: "6", application: Array(3), timestamp: 1569837830615}
    6: {completed: false, candidate: "7", application: Array(3), timestamp: 1569837830615}
    7: {completed: false, candidate: "8", application: Array(3), timestamp: 1569837830615}
    length: 8
    __proto__: Array(0)
    ScannedCount: 8
    __proto__: Object

我的问题是，当我点击给定行上的删除按钮时：

总是删除索引号 0，即使我命中了不在索引 0 上的行
我的视图没有呈现，即删除的行没有消失

Answer 1

splice() 方法的第一个参数是起始索引，即开始更改数组的索引。

在下面显示的代码中，您没有将索引作为第一个参数传递，而是传递索引处的值。

this.applicationData.Items.splice(removeIndex[index], 1);

更改该语句以传递索引。

this.applicationData.Items.splice(index, 1);

从 Angular 中的 mat-table 中显示的数组列表中删除对象

Remove object from arraylist displayed in a mat-table in Angular

angular

typescript

arraylist

splice