如何删除材料数据表的行？

如何解决如何删除材料数据表的行？

在我的 html 文件中，我正在调用一个删除方法并传递我的项目的 id (habitId) 以及我的数据表行的索引。

data-table.component.html:

<ng-container matColumnDef="delete">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Delete?</th>
  <td mat-cell *matCellDef="let habit; let i = index;">
    <button mat-raised-button color="warn" (click)="delete(habit.habitId,i)">Delete</button>
  </td>
</ng-container>

在我的 data-table.component.ts 文件中，我有以下删除方法：

    delete(habitId: Pick<Habit,'habitId'>,i: number,dataSource): void {
    console.log('delete was pressed. the id of the habit is: ',habitId);
    console.log('delete was pressed. the id of the row is: ',i);
    this.habitService
      .deleteHabit(habitId)
      .subscribe(() => ( this.habits$ = this.habitService.fetchAllById(this.authService.userId)));
    console.log(this.dataSource);
    this.dataSource.splice(i,1);
    this.dataSource._updateChangeSubscription();
}

我的数据源定义如下：

dataSource: any = new HabitDataSource(this.habitService,this.authService);

使用 HabitDataSource 类：

    export class HabitDataSource extends DataSource<any> {
  userId: Pick<User,'id'>;

  constructor(private habitService: HabitService,private authService: AuthService) {
    super();
  }

  connect(): Observable<Habit[]> {
    this.userId = this.authService.userId;
    return this.habitService.fetchAllById(this.userId);
  }

  // tslint:disable-next-line:typedef
  disconnect() {}
}

我的惯用服务.ts 中的 deleteHabit 函数执行以下操作（正在运行）：

deleteHabit(habitId: Pick<Habit,'habitId'>): Observable<{}> {
console.log('delete method inside the habit service was called',habitId);
return this.http
  .delete<Habit>(`${this.habitsUrl}/${habitId}`,this.httpOptions)
  .pipe(
    first(),catchError(this.errorHandlerService.handleError<Habit>('deleteHabit'))
  );
}

所以基本上我试图在 this.dataSource 上使用 splice() 函数，但我收到错误：ERROR TypeError: this.dataSource.splice is not a function强>

我假设这是因为 this.dataSource 不返回数组，并且 splice() 函数只能用于数组。

但是如何解决这个问题？任何帮助都非常感谢。提前致谢！