Angular:具有使用 mat-select-filter 并向过滤器字段添加图标的搜索功能的多个 mat-select 下拉列表

Question

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

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

1. permissions 需要是 Array 而不是 object:

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

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

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

3. 如果使用多重选择，您需要自己隐藏未过滤的结果。否则，您可以只遍历 filteredList，但在这种情况下，旧的选择会在过滤时被删除。而是迭代 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;
   }
   

4. 默认不支持向过滤器添加一些图标 - 或者至少我没有找到。不过，您可以使用 css 解决此问题。

   将此添加到您的 index.html 以确保正确加载字体:

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   

   将以下内容添加到您的 CSS 中。它添加了一个包含搜索图标作为字体的 ::after 元素。注意将 input 元素的 width 减小图标所需的空间(这里是 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，否则样式会使用错误的选择器。我不确定这是否是 stackblitz 问题。没有它就试试吧。如果可行，您还可以从 input 元素的 width 中删除 !important。

这是 stackblitz 上解决方案的链接:https://stackblitz.com/edit/mat-select-filter-zuy7ev