Применить datasource.filter к * ngFor

Question

У меня есть таблица соответствия, которая фильтруется на основе заданных вами критериев поиска, для которых я использовал пример: https://material.angular.io/components/table/examples

Можно ли применить этот фильтр к *ngFor? Моя конечная цель - обновить маркеры в соответствии с табличным фильтром.

Это карта, к которой я хочу ее применить:

<agm-map [latitude]="lat" [longitude]="lng" (mapClick)="placeMarker($event)">
  <agm-marker *ngFor="let marker of markers" [iconUrl]="marker.edit ? 'assets/selectedMarker.png' : ''" [latitude]="marker.lat" [longitude]="marker.lang">
    <agm-info-window>{{marker.id}}</agm-info-window>
  </agm-marker>
</agm-map>

А это мой стол:

  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

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

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

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

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

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

Answer 1

Мне удалось решить эту проблему с помощью datasource.filteredData.

Итак:

this.markers = this.datasource.filteredData;