时间戳

首页 > 解决方案 > Apply datasource.filter to a *ngFor

angular - Apply datasource.filter to a *ngFor

问题描述

I have a mat-table that filters based on the search criteria that you give for which I used the example on: https://material.angular.io/components/table/examples

Is it possible to apply this filter to an *ngFor? My ultimate goal is to update my markers according to the table filter.

This is the map I want to apply it to:

<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>

And this is my table:

  <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>

标签： angularangular-material

解决方案

我能够使用 datasource.filteredData 解决它。

所以：

this.markers = this.datasource.filteredData;

推荐阅读