Question

我创建了一个垫子表以显示动物列表。现在，我想添加一个过滤器以按名称或类型动态搜索动物。但是，我的实现似乎无法正常工作（即过滤器无法过滤），也不会显示任何错误。

我从添加表格开始：

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        <table mat-table [dataSource]="animals" class="mat-elevation-z8">

                <ng-container matColumnDef="name">
                        <th class="header" mat-header-cell *matHeaderCellDef>
                                Name
                        </th>
                        <th mat-header-cell *matHeaderCellDef> Name</th>
                        <td mat-cell *matCellDef="let animal"> {{animal.name}} </td>
                </ng-container>
                <ng-container matColumnDef="type">
                        <th class="header" mat-header-cell *matHeaderCellDef>
                                Type
                        </th>
                        <th mat-header-cell *matHeaderCellDef>Type</th>
                        <td mat-cell *matCellDef="let animal"> {{animal.type}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        </table>

applyFilter的逻辑：

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

数据源中的数据是从端点检索的，它是动物列表。因此，在ngInit中，我为数据源提供了数据：

 this.store.dispatch( new GetAnimals() ).subscribe( x =>
    {
      this.animals = x.animals;
      this.dataSource = this.animals ;
    }
    );

我在数据源中拥有的一个例子：

[{…}]
    0:
        id: "5684"
        type: ["dog"]
        name: "scoopy"
        __proto__: Object
    length: 1
    __proto__: Array(0)

过滤到Angular中的席子表而不过滤

0 个答案: