删除整行 angular 2 材料？

Question

JSON

[
  { position: 1, name: 'test', value: 1.0079, symbol: 'HHH' },
  { position: 2, name: 'test2', value: 4.0026, symbol: 'BBB' },
  { position: 3, name: 'test3', value: 6.941, symbol: 'BB' },
  { position: 4, name: 'test4', value: 9.0122, symbol: 'CC' },
]

TS

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  removeSelectedRows() {
     this.selection.selected.forEach(item => {
      let index: number = this.data.findIndex(d => d === item);
      console.log(this.data.findIndex(d => d === item));
      this.dataSource.data.splice(index,1);

      this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
      setTimeout(() => {
        this.dataSource.paginator = this.paginator;
      });
    });
    this.selection = new SelectionModel<Element>(true, []);
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }
}

HTML

<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef>
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-icon-button color="#b71c1c">
                    <mat-icon aria-label="Delete">delete</mat-icon>
                  </button>
      </mat-cell>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

     <!-- Weight Column -->
    <ng-container matColumnDef="value">
      <mat-header-cell *matHeaderCellDef> value </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"
             (click)="selection.toggle(row)">
    </mat-row>
  </mat-table>


</div>

我想使用一键删除整行 解释 -> 当我点击删除按钮时，整行应该被删除，但在这里我正在做 API 调用，例如当我删除任何行时，它会将名称发送到 API！

这是我的 stackbliz 演示 -https://stackblitz.com/edit/delete-rows-mat-table-f5f7tr?file=app%2Ftable-selection-example.ts

Answer 1

添加删除行的函数：

  deleteRow(row) {
    this.dataSource.data.splice(row.position-1, 1);
    this.dataSource =  new MatTableDataSource<Element>(this.dataSource.data);
  }

当点击删除按钮时在 HTML 中调用这个函数

<button (click)="deleteRow(row)" mat-icon-button color="#b71c1c">
      <mat-icon aria-label="Delete">delete</mat-icon>
</button>

Answer 2

你可以试试这个：

HTML：

<!-- Checkbox Column -->
<ng-container matColumnDef="actions">
  <mat-header-cell *matHeaderCellDef> </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-icon-button color="#b71c1c" (click)="removeSelectedRow(row)">
      <mat-icon aria-label="Delete">delete</mat-icon>
    </button>
  </mat-cell>
</ng-container>

TS：

removeSelectedRow(row) {
    //const index = this.data.findIndex(obj => obj === row);
    const index = this.data.findIndex(obj => obj.codeData == row.codeData);
    this.data.splice(index, 1);
    this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
}

StackBlitz HERE

结果：

Answer 3

最好检查index != -1

removeSelectedRows(row) {
    let index = ELEMENT_DATA.findIndex(x => x.position == row.position);

    if (index != -1) {
      ELEMENT_DATA.splice(index, 1)
    }
    this.dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
}