Angular：多个 mat-select 下拉菜单，具有使用 mat-select-filter 的搜索功能并向筛选字段添加图标

Question

我想在 mat-select 模块中实现 mat-select-filter。我添加了一个搜索图标，用于根据输入的字符在下拉列表中搜索项目。我已经提到了这个 mat-select-filter and stackblitz 但我没有得到过滤器 field.Below 是我使用的代码

search-filter.component.html

 <mat-form-field class="input-permissions">
    <mat-select
      placeholder="Permissions"
      multiple
      [formControl]="permissionsControl"
    >
      <mat-select-filter
        [array]="permissions"
        (filteredreturn)="filteredList=$event"
      ></mat-select-filter>
      <mat-option
        *ngFor="let permission of permissions"
        [value]="permission.value"
      >
        {{ permission.value}}
      </mat-option>
    </mat-select>
  </mat-form-field>

mat-select-filter.component.ts

    export class MatSelectFilterComponent{
       permissions: {{id: 0, value: fruit},{id: 1, value: vegetable} };
       public filteredList = this.permissions.slice();
    }

如有任何帮助，我们将不胜感激。

Answer 1

permissions 需要是 Array 而不是 object:

public permissions = [{id: 0, value: 'fruit' },{id: 1, value: 'vegetable'} ];
public filteredList = this.permissions.slice();

您需要在 mat-select-filter 上指定 displayMember 并且 filteredreturn 应该是 filteredReturn:

<mat-select-filter [array]="permissions" (filteredReturn)="filteredList=$event" [displayMember]="'value'">
</mat-select-filter>

如果使用多个 select，您需要自己隐藏未过滤的结果。否则你可以迭代 filteredList，但在那种情况下，旧的 select 离子会在过滤时被删除。而是迭代 permissions，然后隐藏那些不应显示的内容。
```
<mat-option *ngFor="let permission of permissions" [value]="permission"
    [class.hide]="!isFiltered(permission)">
    {{permission.value}}
</mat-option>
```
以及检查过滤后元素的函数
```
public isFiltered(permission) {
  return this.filteredList.find(item => item.id === permission.id)
}
```
和用于隐藏的css
```
.mat-option.hide {
  display: none;
}
```
没有默认支持向过滤器添加一些图标 - 或者至少我没有找到。不过，您可以使用 css.
解决此问题
将此添加到您的 index.html 以确保正确加载字体：
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
将以下内容添加到您的 css。它添加了一个包含搜索图标作为字体的 ::after 元素。注意将 input 元素的 width 减少图标所需的 space（这里是 20px width 和 5px padding-left) 以确保它们并排放置。
```
.mat-filter-input {
  width: calc(100% - 25px) !important;
}

.mat-filter::after {
  content: "\e8b6";
  font-family: material icons;
  vertical-align: bottom;
  font-size: 20px;
  padding-left: 5px;
}
```
我需要在组件中设置 encapsulation: ViewEncapsulation.None，否则样式会出现错误的 selector。我不确定这是否是 stackblitz 问题。没有它就试试吧。如果可行，您还可以从 input 元素的 width 中删除 !important。

这是关于 stackblitz 的 link 解决方案：https://stackblitz.com/edit/mat-select-filter-zuy7ev

Angular：多个 mat-select 下拉菜单，具有使用 mat-select-filter 的搜索功能并向筛选字段添加图标

Angular: Multiple mat-select dropdown with search functionality using mat-select-filter and adding an icon to the filter field

filtering

drop-down-menu

angular-material

angular