如果未找到数据,如何在数据表角材料中显示空消息 [英] How to show empty message in data table angular material, If no data found
本文介绍了如果未找到数据,如何在数据表角材料中显示空消息的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用此代码
<mat-table #table [dataSource]="dataSource" matSort >
<ng-container matColumnDef="tache">
<mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell>
</ng-container>
<ng-container matColumnDef="outil">
<mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell>
</ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
</mat-row>
</mat-table>
因此,如何在数据表中显示空消息找不到记录".
So, how to show empty message "No Record found" in data table.
推荐答案
就像错误在说,您只能使用*ngIf
.在这里比较这两个表:
It's like bugs is saying, you can just use *ngIf
. Compare these two tables here:
https://stackblitz.com/edit/angular-w9ckf8
<mat-toolbar color="primary">My empty table</mat-toolbar>
<mat-table #table [dataSource]="dataSourceEmpty" matSort *ngIf="dataSourceEmpty.length > 0">
<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="dataSourceEmpty.length === 0">No records found</div>
<hr>
<mat-toolbar color="primary">My full table</mat-toolbar>
<mat-table #table [dataSource]="dataSource" matSort *ngIf="dataSource.length > 0">
<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>
包含数据的TS:
TS with data:
displayedColumns = ['Name', 'Age']
dataSource = [{name:'Sara',age:17}, {name: 'John', age: 20}]
dataSourceEmpty = []
这篇关于如果未找到数据,如何在数据表角材料中显示空消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文