带下拉菜单的角垫表内联过滤器答案

【问题标题】：Angular mat-table inline filter with drop down带下拉菜单的角垫表内联过滤器
【发布时间】：2021-05-09 21:11:35
【问题描述】：

如何从网格中获取具有唯一值的内联过滤器的下拉列表。例如，我的 JSON 返回 100 行 Person 对象。那有5列。我想过滤所有这些列。我希望 3 列是文本框，其他 2 列是下拉。在示例中，这里有 4 行，我只想在 Pet 过滤器中显示 3 个唯一值（即“Dog”、“Cat”和“Lizard”），这应该是一个下拉菜单。（注意：不想在下拉菜单中显示两次“狗”）。从下拉列表中选择一个值后，表格应相应刷新。对于 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;
  }

【问题讨论】：

致要求关闭的人 - 先生/女士，我看到你关闭我所有的问题。你能告诉我这个问题有什么问题吗？

标签： angular mat-table

【解决方案1】：

得到了答案。更新了 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>

【讨论】：