如何在angular中删除mat表的行之间的行？

import { MatTableDataSource } from '@angular/material/table';

export class YourComponent {
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['column1', 'column2', 'column3'];

  constructor() {
    this.dataSource = new MatTableDataSource(yourDataArray);
  }
}

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 列定义 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef>列1</th>
    <td mat-cell *matCellDef="let element">{{element.column1}}</td>
  </ng-container>

  <ng-container matColumnDef="column2">
    <th mat-header-cell *matHeaderCellDef>列2</th>
    <td mat-cell *matCellDef="let element">{{element.column2}}</td>
  </ng-container>

  <ng-container matColumnDef="column3">
    <th mat-header-cell *matHeaderCellDef>列3</th>
    <td mat-cell *matCellDef="let element">{{element.column3}}</td>
  </ng-container>

  <!-- 行定义 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

deleteRow(row: any) {
  const index = this.dataSource.data.indexOf(row);
  this.dataSource.data.splice(index, 1);
  this.dataSource = new MatTableDataSource(this.dataSource.data);
}

<button mat-button (click)="deleteRow(row)">删除</button>