Angular Material mat-table无数据时如何显示跨全列无数据提示行

直接利用mat-table原生的行定义能力就能实现，不需要额外引入插件，步骤如下：

• 首先在组件中维护要展示的列配置数组，数组长度就是表格总列数，用来给提示行做跨列配置。
• 在普通数据行定义的后面，新增专门的无数据提示行，用*matNoDataRow结构指令绑定，这个指令会自动在数据源为空时渲染该行、有数据时自动隐藏，不需要手动写显隐判断。
• 提示行内部只需要放一个td标签，动态绑定colspan为列数组的长度，就能实现横跨所有列的效果，再加个居中样式就和预期效果一致。

代码示例 #

组件TS文件片段 #

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  // 表格展示的列，顺序和表头顺序一致
  columnsToDisplay = ['firstName', 'lastName', 'email', 'phone'];
  // 表格数据源，初始为空数组
  dataSource = new MatTableDataSource<any>([]);
}

模板HTML文件片段 #

<table mat-table [dataSource]="dataSource" class="w-full mat-elevation-z8">
  <!-- 原有列定义，和常规写法完全一致 -->
  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef>First Name</th>
    <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef>Last Name</th>
    <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef>Email</th>
    <td mat-cell *matCellDef="let row">{{row.email}}</td>
  </ng-container>

  <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef>Phone</th>
    <td mat-cell *matCellDef="let row">{{row.phone}}</td>
  </ng-container>

  <!-- 表头行、普通数据行，和常规写法一致 -->
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>

  <!-- 核心：无数据提示行 -->
  <tr class="no-data-row" *matNoDataRow>
    <td [attr.colspan]="columnsToDisplay.length">
      No data Available
    </td>
  </tr>
</table>

组件样式文件片段 #

.no-data-row td {
  padding: 16px;
  text-align: center;
  color: rgba(0, 0, 0, 0.54);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

低版本兼容方案 #

如果你使用的Angular Material版本低于8.0，没有内置*matNoDataRow指令，只需要把无数据行的指令替换成手动的显隐判断即可，其他代码不变：

<!-- 低版本替换*matNoDataRow为如下*ngIf判断 -->
<tr class="no-data-row" *ngIf="!dataSource.data?.length">
  <td [attr.colspan]="columnsToDisplay.length">
    No data Available
  </td>
</tr>

如果你的数据源是普通数组而不是MatTableDataSource实例，判断条件改成*ngIf="!dataSource?.length"即可。

内容的提问来源于stack exchange，提问作者Sachin M S