javascript - 如何使用 Angular 将动态搜索框放在表格上？

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>

然后你需要添加方法来实际添加过滤器到你的源:

Ts

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

希望对您有所帮助。