[英]How to show results from remote query in Angular-material autocomplete?
[英]How to show “no records” if filter has no results in material table angular
我想添加“無記錄消息”如果有人搜索當前表顯示空數據!
以下是角js中的樣本材料表的鏈接https://material.angular.io/components/table/examples
我找到了確切的解決方案
在打字稿中:
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;
}
}
在模板中
<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>
對於使用RXJS的人來說,反應式解決方案是這樣的:
零件:
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
);
}
}
模板:
<mat-card *ngIf="noResults$ | async">
No results
</mat-card>
那么applyFilter
很可能也是一個可觀察的但是堅持原始我把它作為一個函數。
您可以使用ng-if檢查條件<table ng-if="data==null" > <tr > <td colspan="numberofcolum"> No Records </td></tr> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.