Question

我想添加＆＃34;没有记录消息＆＃34;如果有人搜索当前表显示空数据！

以下是角度js中样本材料表的链接 https://material.angular.io/components/table/examples

Answer 1

我找到了确切的解决方案

在打字稿中：

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>

Answer 2

对于使用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很有可能也是可观察的，但为了坚持原来的做法，我将其保留为函数。

Answer 3

您可以使用ng-if检查条件 <table ng-if="data==null" > <tr > <td colspan="numberofcolum"> No Records </td></tr> </table>

如何显示＆＃34;没有记录＆＃34;如果过滤器在材料表角度没有结果

3 个答案: