如何在动态数据表角度显示空消息

Posted 2023-03-13

【中文标题】如何在动态数据表角度显示空消息

【英文标题】：How to show a empty message in dynamic data table angular

【发布时间】：2019-07-04 11:00:26

【问题描述】：

当过滤器不匹配时，我尝试显示空消息错误：

<div *ngIf="dataSource.length === 0">No data</div>

但它不起作用，因为我使用 MatTableDataSource 构建了一个动态表。

为了更好地理解，我将动态表更改为预定义的数组。

const ELEMENT_DATA: MembersElement[] = [
 name: 'Jenny', age: 17 ,
 name: 'Daniel', age: 18 
];

但是，必须使用 MatTableDataSource 来动态构建用户表

这是我所有的ts代码。

    import  Component, OnInit  from '@angular/core';
import MatTableDataSource from '@angular/material';

export interface SociosElement 
  nombre: string;
  edad: number;


const ELEMENT_DATA: MembersElement[] = [
   name: 'Jenny', age: 17 ,
   name: 'Daniel', age: 18 
];

@Component(
  selector: 'app-pruebas',
  templateUrl: './tableMembers.component.html',
  styleUrls: ['./tableMembes.component.css']
)
export class PruebasComponent 
  displayedColumns: string[] = ['name', 'age'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(filterValue: string) 
    this.dataSource.filter = filterValue.trim().toLowerCase();
  

这是我的 HTML 代码。

<mat-toolbar color="primary">My full table</mat-toolbar>
<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> element.name </mat-cell>
    </ng-container>
    <ng-container matColumnDef="age">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>
        <mat-cell *matCellDef="let element"> element.age </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">
    </mat-row>
</mat-table>
<div *ngIf="dataSource.length === 0">No data</div>

【参考方案1】：

使用*ngIf="dataSource.length === 0" 条件无法达到您想要的结果，仅仅是因为在您进行过滤时数据源根本没有改变。您需要做的是注意过滤后的数据长度。您可以使用以下内容： *ngIf="dataSource.filteredData.length > 0" 作为条件。 datasource.filteredData 的长度会根据过滤结果而变化。这种情况可以隐藏你的桌子。你可以把它放在你的表格标签中，比如： <table mat-table [dataSource]="dataSource" *ngIf="dataSource.filteredData.length > 0">

【参考方案2】：

使用 ngIf 的一个警告。如果您使用 matSort 并使用 *ngIf 将表格嵌套在块内，则排序将不起作用，因为 ngIf 将 viewChild 设置为未定义。 Reference

使用 [ngClass] 来解决这个问题

<div [ngClass]="dataSource.filteredData.length > 0 ? 'visible': 'hidden'">
  <mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> element.name </mat-cell>
    </ng-container>
    <ng-container matColumnDef="age">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>
      <mat-cell *matCellDef="let element"> element.age </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">
    </mat-row>
  </mat-table>
</div>
<div [ngClass]="dataSource.filteredData.length > 0 ? 'hidden': 'visible'">
  <tr>No results found.</tr>
</div>

这是类的 CSS

.hidden 
  visibility: hidden;


.visible 
  visibility: visible;

【参考方案3】：

对于 mat-table，在 v10 之前，您可以通过执行以下操作在 dataSource 为空时为表提供一行数据： [dataSource]="dataSource.data.length > 0 && dataSource.data.filteredData > 0 ? dataSource : emptyDataSource" 然后为您的单元格创建一个列 def 以显示空数据消息： <ng-container vdlColumnDef="empty-row"> <td *matCellDef="let row" mat-cell [colSpan]="displayedColumns.length">No Data</td> </ng-container> 然后更改您的行定义以在 dataSource 为空时显示空行列定义： <tr mat-row *matRowDef="let row; columns: dataSource.data.length > 0 && dataSource.data.filteredData > 0 ? displayedColumns : ['empty-row'];">

https://stackblitz.com/edit/angular-mat-table-no-data?file=src%2Fapp%2Ftable-basic-flex-example.html

在 Angular Material 10 之后，他们为表格中没有数据时添加了一条指令：“如果您想在没有数据与过滤器匹配时显示一条消息，您可以使用 *matNoDataRow 指令。” https://v10.material.angular.io/components/table/overview#filtering