如果未找到数据，如何显示“未找到结果” - Angular Material Datatable Filter答案

【问题标题】：How to show "No Result Found" If no data found - Angular Material Datatable Filter如果未找到数据，如何显示“未找到结果” - Angular Material Datatable Filter
【发布时间】：2019-06-18 22:23:44
【问题描述】：

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

这就是我想要的：

提前谢谢你

【问题讨论】：

标签： angular filter angular-material

【解决方案1】：

您可以检查dataSource.filteredData列表的长度，然后在表格内显示No Content Found消息：

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

【讨论】：

StackBlitz 缺少 hide 类的 css 样式。但它让我朝着正确的方向前进，谢谢！
当我们没有找到记录时是否会禁用行选择？

【解决方案2】：

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

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

【讨论】：

嗨@sadid，我们可以在表格中显示“未找到结果”吗？现在它在之外

我对上面的 stackblitz 做了一些修改here 现在看起来消息在表格内。

@SamuelKavinLoganathan 是的，我们当然可以。然后当列表中没有数据时不要隐藏表格并做一些 css 技巧，因为 Fabian Küng 已经创建了一个 stackblitz 。希望能帮助到你。实际上，我只是演示了如何根据过滤数据不显示数据的主要解决方法。如果此答案有帮助，请随时接受答案

@SamuelKavinLoganathan 已更新答案，没有额外的 CSS 和布尔变量

谢谢萨迪德汗和费边