我正在使用Angular材料2多选和Angular 5.我已经添加了一个搜索过滤器但是当用户搜索特定项目并选择那些时,它会删除之前选择的项目 .
我希望保留所有选定的项目,除非并且直到用户取消选择它们 .
例如:我有一个地区列表,如果用户选择非洲和亚洲然后搜索并选择欧洲,所以我们只看到欧洲被选中 .
filterRegion.html
<mat-select [compareWith]="compareFn" placeholder="REGION" [formControl]="region" multiple>
<mat-select-trigger>
{{region.value ? region.value[0]?.value : ''}}
<span *ngIf="region.value?.length > 1" >
(+{{region.value.length - 1}})
</span>
</mat-select-trigger>
<mat-form-field class="searchBox">
<input matInput placeholder="Search" [(ngModel)]="searchRegion" >
</mat-form-field>
<mat-option *ngFor="let r of regionList | filterSearch: searchRegion" [value]="r">{{r.value}}</mat-option>
</mat-select>
filter-search-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterSearch'
})
export class FilterSearchPipe implements PipeTransform {
transform(value: any, input: string): any {
if (input) {
input = input.toLowerCase();
return value.filter(function (el: Object) {
return el['value'].toLowerCase().indexOf(input) > -1;
})
}
return value;
}
}
但我收到了mat-select-header和mat-select-search的错误 .
2 回答
对于这个问题,我建议你使用角度材料的autoComplete模块 .
那么对于multiSelecting必须使用芯片容器(材料模块)
并在组件的ts文件中 . 地点:
因此,您必须合并autoComplete和芯片容器 . 它成为一个非常好的用户体验 .
我处理同一问题的一种方法就是隐藏DOM中的元素