Как показать «Результат не найден» Если данные не найдены - Угловой материал Фильтр данных

Question

Я хочу показать "результат не найден" в угловом материале, который можно указать при фильтре.Вот мой пример кода Пример кода

Вот как я хочу:

Заранее спасибо

Answer 1

В вашем источнике данных есть свойство с именем filteredData. filteredData обновляется с последним списком данных после применения вашего фильтра. Таким образом, вы можете просто проверить длину dataSource.filteredData и определить, что вы хотите показать или скрыть.

Я создал stackblitz . Вы можете посмотреть на это.

Answer 2

Вы можете проверить длину списка 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