我想在 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();
}
如有任何帮助,我们将不胜感激。
最佳答案
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>
如果使用多重选择,您需要自己隐藏未过滤的结果。否则,您可以只遍历
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; }
默认不支持向过滤器添加一些图标 - 或者至少我没有找到。不过,您可以使用 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
关于Angular:具有使用 mat-select-filter 并向过滤器字段添加图标的搜索功能的多个 mat-select 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61913755/