如果未找到数据，如何显示“未找到结果”-角度材料数据表过滤器

Question

我想在过滤时在角度材质数据表中显示“未找到结果”。 这是我的示例代码Sample Code

这就是我想要的：

提前谢谢

Answer 1

您的数据源中有一个名为filteredData的属性。应用过滤器后，filteredData将使用最新的数据列表进行更新。因此，您只需检查dataSource.filteredData的长度并确定要显示或隐藏的内容即可。

我创建了一个stackblitz。你可以看看这个。

Answer 2

您可以检查dataSource.filteredData列表的长度，然后在表内显示“找不到内容”消息：

HTML：

<mat-form-field>
    <input matInput [formControl]="nameFilter" placeholder="Filter 1 (working sample)">
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. 
      <div>
      <mat-form-field>
  <input matInput class="form-field" [formControl]="positionFilter" placeholder="Postion Filter">
</mat-form-field>
      </div>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name 
       <div>
      <mat-form-field>
  <input matInput class="form-field" [formControl]="nameFilter" placeholder="Name Filter">
</mat-form-field>
      </div>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

<ng-container matColumnDef="isDataAvailable">
   <mat-footer-cell *matFooterCellDef colspan="6">
      No Data found
   </mat-footer-cell>
</ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<mat-footer-row *matFooterRowDef="['isDataAvailable']" [ngClass]="{'hide':!(dataSource.filteredData!=null && dataSource.filteredData.length==0)}">
   </mat-footer-row>
</table>

Updated_StackBlitz