html - 如何获取 mat-table 的实例？

Question

我正在尝试获取表的实例，以便在更新数据源时使用 renderrows() 函数。

我已经尝试过使用@ViewChild 来完成它，但无论我做什么它都是未定义的。

组件.ts：

import {
  MatTable,
  MatTableDataSource,
  MatPaginator,
  MatSelectModule
} from "@angular/material";

@ViewChild(MatTable, { static: true }) playersTable: MatTable<any>;

addToDataSource(data) {
for (let index = 0; index < data.length; index++) {
  this.dataSource.data.push(data[index]);
 }
 this.playersTable.renderRows(); // this.playersTable is undefined.
}

.html：

<div class="mat-elevation-z8">
  <table
   mat-table
   #playersTable
   [dataSource]="dataSource"
   *ngIf="!loadingData; else loading"
   class="row"
>
...
</table>

Answer 1

给你的垫子表ID

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

然后使用 ViewChild 您可以访问表的实例。而不是将数据推送到数据源，而是使用 new MatTableDataSource() 分配数据

  @ViewChild('playersTable', {static:true}) playersMatTable: MatTable<any >;
  addToDataSource(data){
     this.dataSource = new MatTableDataSource(data);
     this.playersTable.renderRows();
   }

或者如果您想将数据添加到现有数据源，那么您需要在不使用实例的情况下刷新数据源。

addToDataSource(data) {
  for (let index = 0; index < data.length; index++) {
   this.dataSource.data.push(data[index]);
  }
    this.dataSource = [...this.dataSource];  //refresh the dataSource
  }