Question

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

我已经尝试过使用它，就像通常使用@ViewChild来完成它一样，但是无论我做什么都没有定义。

component.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可以访问表的实例。而不是将数据推送到dataSource，而是使用新的MatTableDataSource（）分配数据

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

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

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

如何获取垫子表的实例？

1 个答案: