Question

我有一个Mat-table，可以根据您给出的搜索标准（例如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;

将datasource.filter应用于* ngFor

1 个答案: