如何在动态数据表angular中显示空消息

Question

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

<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>

Answer 1

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