J'essaie d'afficher une erreur de message vide lorsque le filtre n'a pas de correspondance avec:
<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>
mais cela ne fonctionne pas car je crée une table dynamique avec MatTableDataSource. p >
Pour une meilleure compréhension, j'ai changé ma table dynamique pour un tableau prédéfini.
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(); } }
Cependant, il est nécessaire d'utiliser MatTableDataSource pour une construction dynamique de la table des utilisateurs
Ceci est tout mon code ts.
const ELEMENT_DATA: MembersElement[] = [ { name: 'Jenny', age: 17 }, { name: 'Daniel', age: 18 } ];
Ceci est mon code HTML.
<div *ngIf="dataSource.length === 0">No data</div>
3 Réponses :
Vous ne pouvez pas atteindre ce que vous voulez en utilisant la condition Une mise en garde à l'utilisation de ngIf. Si vous utilisez matSort et que vous imbriquez la table dans un bloc à l'aide de * ngIf, le tri ne fonctionnera pas car le ngIf définit le viewChild sur undefined. Référence Utilisez [ngClass] pour contourner ce problème Voici le CSS pour les classes Pour un mat-table, avant la v10, vous pouvez donner à la table une ligne de données lorsque votre dataSource est vide en faisant ceci:
https://stackblitz.com/edit/angular-mat-table-no-data?file=src%2Fapp%2Ftable-basic-flex-example.html Après Angular Material 10, ils ont ajouté une directive lorsqu'il n'y a pas de données dans la table: "Si vous voulez afficher un message lorsque les données ne correspondent pas au filtre, vous pouvez utiliser la directive * matNoDataRow." https://v10.material.angular.io/components/table/overview# filtrage * ngIf = "dataSource.length === 0"
simplement parce que la source de données ne change pas du tout lorsque vous effectuez un filtrage. ce que vous devez faire est de faire attention à la longueur des données filtrées. vous pouvez utiliser quelque chose comme suivant:
* ngIf = "dataSource.filteredData.length> 0"
comme condition. la longueur des modifications datasource.filteredData en fonction des résultats filtrés. cette condition peut masquer votre table. vous pouvez mettre ceci dans votre balise de table comme:
votes
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
<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>
votes
[dataSource] = "dataSource.data.length> 0 && dataSource.data.filteredData> 0? dataSource: emptyDataSource"
Créez ensuite une colonne par défaut pour votre cellule afin d'afficher le message de données vide:
Aucune donnée
< / p>