mat-table组件如何避免初始化时没数据导致报错的问题？

• 背景

  我们使用mat-table时，传入dataSource是必备的，

<table
        mat-table
        matSort
        [dataSource]="dataSource"
        class="mat-elevation-z8"
>
....
</table>

但是我们传给table的数据大部分情况下都是异步获取的，而在获取到数据之前，mat-table就已经加载了。此时就会出现这样一个报错：

main.ts:11 ERROR TypeError: Cannot read properties of undefined (reading 'length')
at MatTable._getAllRenderRows (table.mjs:1635:40)

出现此错误的原因在于，mat-table在渲染的时候，此时dataSource是undefined或null，导致mat-table访问数据源并获取length值的时候出现上述错误。

• 解决方法

  • 在ts中，按如下方法定义dataSource，就使用这么简单的一句定义，就可避免在初始化的时候发生报错。

dataSource = new MatTableDataSource();

在数据源为空的时候，如果让table不显示？

• 背景

  • 上面我们讲到使用mat-table的时候，你都需要传入一个数据源dataSource。而如果你这个dataSource为空数组，那么在前端页面渲染的时候，依然会展示出表头，只不过表格内部显示空白而已。而这显然是毫无意义的，既然没有数据，就直接隐藏表格不展示就是，根本用不着展示表头。

• 解决

  将table和分页器mat-paginator包裹在一个section里，然后给这个section设置如下hidden 条件即可。

<section
      [hidden]="!dataSource || !dataSource.data || dataSource.data.length === 0"
>
  <table
        mat-table
        matSort
        [dataSource]="dataSource"
        class="mat-elevation-z8"
  >
  ....
  </table>
  <mat-paginator
        class="datatable-paginator"
        [pageSizeOptions]="[5, 10, 20, 50, 100]"
        pageSize="50"
        showFirstLastButtons
      >
  </mat-paginator>
</section>

有人可能疑问为何不用*ngif而要用hidden？主要原因是如果用了ngif则里面的分页器mat-paginator就会失效，但具体原因尚不清楚。