Angular 如何使用按钮（角度）更改材质数据表中的数据

我有一个使用ng generate@Angular/Material:Material Table--name=BHTable创建的角度材质数据表

我试图测试如何在运行时动态更改表的内容。为此，我想创建一个按钮，通过将数据源数组设置为空来清除表

在my datasource.ts中，我添加了一个函数来更改表的数据源

public UpdateData(IncomingData: BhTableItem[]){
  this.data = IncomingData;
  }

当我按下按钮时，我让它调用我的普通（非datasource）components.ts中的一个函数，该函数包含以下代码

  public UpdateTest(){

  this.dataSource.UpdateData([]);

  }

这将更新表中的数据源，并更改表的内容。然而，当我按下按钮时，什么也没有发生。。。。我读过很多不同的帖子试图弄明白这一点，但我还没有让它发挥作用。我认为答案与我的方法有关，我没有激活可观察对象来更新表，但我不确定。任何帮助都将不胜感激

编辑：我忘了提。当我将我的行放入ngOnInit时，它看起来可以在页面加载时更改表的内容。我想要同样的功能，但当我按下按钮时它就会发生

  ngOnInit() {
    this.dataSource = new BhTableDataSource();
  this.dataSource.UpdateData([]);
  }

HTML，因为它是被要求的

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

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

  <mat-paginator #paginator
      [length]="dataSource?.data.length"
      [pageIndex]="0"
      [pageSize]="50"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>
</div>

<button (click)="UpdateTest()"> Clear Table </button>

身份证件
{{row.id}}
名称
{{row.name}
清理桌子

显示您的HTML。最好共享一个stackblitz你应该共享一个stackblitz，我们看不到你将数据源连接到表的位置。我不知道什么是stackblitz。。我该怎么做？编辑：谷歌正在帮助我解决这个问题。