带下拉菜单的角垫表在线过滤器

如何解决带下拉菜单的角垫表在线过滤器

如何从网格中获取具有唯一值的内联过滤器中的下拉列表。例如，我的 JSON 返回 100 行 Person 对象。那有 5 列。我想过滤所有这些列。我希望 3 列是文本框，其他 2 列是下拉。在示例中，这里有 4 行，我只想在宠物过滤器中显示 3 个唯一值（即“狗”、“猫”和“蜥蜴”），这应该是一个下拉列表。 （注意：不想在下拉菜单中显示两次“狗”）。从下拉列表中选择一个值后，表格应相应刷新。同样，对于 Active 列，它在下拉列表中应该只有 2 个值（即 true 和 false）。

Stackblitz example

createFilter(): (data: any,filter: string) => boolean {
    let filterFunction = function(data,filter): boolean {
      let searchTerms = JSON.parse(filter);
      return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
        && data.id.toString().toLowerCase().indexOf(searchTerms.id) !== -1
        && data.colour.toLowerCase().indexOf(searchTerms.colour) !== -1
      //&& data.active.toLowerCase().indexOf(searchTerms.active) !== -1   ??? How to write this ???
        && data.pet.toLowerCase().indexOf(searchTerms.pet) !== -1;
    }
    return filterFunction;
  }

解决方法

得到了答案。更新的 stackblitz 示例

this.petList = Array.from(new Set(this.people.map(ele=>ele.pet)));

<ng-container matColumnDef="pet">
    <th class="header" mat-header-cell *matHeaderCellDef>
      Pet
      <mat-form-field class="filter" floatLabel="never">
        <mat-label>Search</mat-label>
        <!-- <input matInput [formControl]="petFilter"> -->
        <mat-select  placeholder="Select" [formControl]="petFilter">
            <mat-option value="">Select</mat-option>
            <mat-option *ngFor="let item of petList" value="{{ item | lowercase }}">
                {{ item }}
            </mat-option>
        </mat-select>

      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let person">{{person.pet}}</td>
  </ng-container>