Búsqueda de sitios web

javascript - Cómo mostrar "sin registros" si el filtro no tiene resultados en la tabla material de angular

¡Quiero agregar "Mensaje de No Registros" si alguien busca y la tabla actual muestra datos vacíos!

A continuación se encuentra el enlace para tablas de material de ejemplo en Angular JS https://material.angular.io/components/table/examples

Respuesta #1

Encontré la solución exacta

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

 }
}

En plantilla

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

Respuesta #2

Para las personas que usan RXJS, la solución reactiva es algo así:

Componente:

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
    );
  }
}

Plantilla:

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

El applyFilter probablemente también sería un observable, pero para mantenerme fiel al original lo mantuve como una función.

Artículos relacionados