即使没有数据，Angular Material 数据表也会显示表头答案

【问题标题】：Angular Material data table showing table headers even when there is no data即使没有数据，Angular Material 数据表也会显示表头
【发布时间】：2021-12-08 23:00:33
【问题描述】：

我正在使用 Angular 材料数据表在带有 matSort 的表中显示一些产品相关数据进行排序。在数据表中我使用了[hidden]="!data"，但是当没有数据时，我仍然会显示表头。我尝试用 ngIf 指令包装它，它起作用了，当没有数据时表头没有显示，但 matSort 停止工作。

<table mat-table [hidden]="!data" [dataSource]="data" matSort>
    <ng-container matColumnDef="productName">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
     <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
    </ng-container>
    ...
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

简而言之，当matSort工作没有数据时，我不需要显示表头。

【问题讨论】：

好吧，我猜是data!==null
如果我使用数据！==null。表格根本没有显示任何数据。
这证实了我写的内容，data!==null 之前!data 始终是false 至少hidden=false

标签： angular angular-material mat-table

【解决方案1】：

我也有同样的问题。就我而言，我是这样解决的。

component.html

<app-loading *ngIf="isLoading$ | async"></app-loading>
<div *ngIf="(isLoading$ | async) === false">
   <ng-container *ngIf="dataSource.data.length >= 1; else noData">
      <mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
      <mat-table [dataSource]="dataSource" matSort>
        ...
      </mat-table>
   </ng-container>
   <ng-template #noData>
      <h3>Ops...</h3>
      <p>There is no data...</p>
   </ng-template>
</div>

和component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
...
export class Component implements OnInit {
  dataSource = new MatTableDataSource<any>();
  isLoading$: Observable<boolean>;
  paginator: MatPaginator;
  sort: MatSort;
  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.dataSource.paginator = this.paginator;
  }
  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.dataSource.sort = this.sort;
  }

使用 ViewChild 绑定分页器和排序以与服务器响应异步同步。然后通过 set 可以在分页器、排序或过滤器中设置异步值...

ngAfterViewInit() 循环将在组件初始化后立即运行。并且也许服务还没有响应数据。正如我所说，在我的情况下，我可以使用 set 获取与服务器响应异步的分页器异步，看看https://angular.io/api/core/ViewChild

继续编码\m/

【讨论】：