如何把动态搜索框上的表角？

Question

我有一个表，我想提出一个搜索框，在其上表中的数据动态地搜索和过滤它允许用户查找表更容易桌子上。

我的表的代码是：

<mat-card class="fields-list" *ngIf="tableShown">
      <mat-card-content>
        <mat-card-actions align="end">
          <button type="button" class="topia-btn topia-primary-btn action-buttons" (click)="addClicked()">
            Add New Office
          </button>
        </mat-card-actions>
        <mat-table #table [dataSource]="officePinList">
          <ng-container cdkColumnDef="label">
            <mat-header-cell *cdkHeaderCellDef fxFlex="20%">Label</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="20%">{{officePin.label}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="postalAddress">
            <mat-header-cell *cdkHeaderCellDef fxFlex="55%">Postal Adress</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="55%">{{officePin.postalAddress}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="trash-icon">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%"></mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="15%">
              <mat-icon (click)="deleteGroupOffices(officePin.id)" mat-list-icon matTooltip="Delete" class="icon">
                delete_forever
              </mat-icon>
              <mat-icon (click)="editField(officePin.id)" mat-list-icon matTooltip="Edit" class="icon">edit</mat-icon>
            </mat-cell>
          </ng-container>

          <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row class="table-row" *cdkRowDef="let officePin; columns: displayedColumns;"></mat-row>

        </mat-table>

我的表中的数据源是officePinList

如何才能筛选与动态搜索框表数据表完全一样：https://ciphertrick.com/demo/angularajaxsearch/

Answer 1

只需添加一个输入搜索框：

HTML

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

事后你需要添加方法，实际上filter添加到您的源：

TS

applyFilter(filterValue: string) {
  this.officePinList.filter = filterValue.trim().toLowerCase();
}

希望帮助。