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

Question

我想mat-select-filter在mat-select模块中实现。我添加了一个搜索图标，用于根据输入的字符搜索下拉列表中的项目。我已经提到了这个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. 您需要指定displayMemberonmat-select-filter并且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包含搜索图标作为字体的元素。width请注意将元素的减少input图标所需的空间（此处为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 问题。不用它试试。如果有效，您还可以!important从width元素中删除input。

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