Question

我有一个使用ng generate @ angular / material：material-table --name = BHTable创建的Angular Material数据表。

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

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

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

当我按下按钮时，使它在我的普通（不是数据源）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>

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

0 个答案: