javascript - Cum să afișezi „fără înregistrări” dacă filtrul nu are rezultate în tabelul material Angular

Vreau să adaug „Mesaj de lipse de înregistrări” dacă cineva caută și tabelul curent arată date goale!

Mai jos este linkul pentru tabelele de material de probă în Angular JS https://material.angular.io/components/table/examples

Răspuns #1

Am găsit soluția exactă

În TypeScript :

applyFilter(filterValue: string) {
 filterValue = filterValue.trim(); // Remove whitespace
 filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
 this.dataSource.filter = filterValue;
 if(this.dataSource.filteredData.length==0){
   this.displayNoRecords=true;
 }else{
   this.displayNoRecords=false;

 }
}

În șablon

<mat-card  *ngIf="displayNoRecords" style="padding:100px;">
  <h3 style="text-align:center">We couldn't find data for 
 <span style="color:red">"{{dataSource.filter}}"</span><br>
Make sure the label,type or status are spelled and formatted correctly
</h3>
</mat-card>

Răspuns #2

Pentru persoanele care folosesc RXJS, soluția reactivă este ceva de genul acesta:

Componentă :

export class SomeComponent {
  private noResults$ = new Subject<boolean>();

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

    this.noResults$.next(
      this.dataSource.filteredData.length === 0
    );
  }
}

Șablon :

<mat-card *ngIf="noResults$ | async">
  No results
</mat-card>

applyFilter ar fi, cel mai probabil, de asemenea, un observable, dar pentru a rămâne fidel originalului, l-am păstrat ca funcție.