我正在开发一个项目,需要使用多选下拉菜单实现搜索。当我添加以下代码时,我可以进行搜索,但我之前选择的值在新搜索后消失了。
下面是代码片段。
HTML:
<mat-form-field appearance="fill">
<mat-label>Providers</mat-label>
<mat-select multiple [formControl]="providers">
<mat-select-trigger>
{{providers.value }}
</mat-select-trigger>
<input type="text" autocomplete="off" matInput placeholder="Search By Provider" #multiUserSearch (
input)="onInputChange()">
<mat-option *ngFor="let provider of provider " [value]="provider.PROV">{{provider.PROV}}
</mat-option>
</mat-select>
TS 文件:
onInputChange(){
console.log(this.multiUserSearchInput.nativeElement.value);
const searchInput=this.multiUserSearchInput.nativeElement.value?
this.multiUserSearchInput.nativeElement.value.toLowerCase():'';
this.provider=this._provider.filter(u=>{
const PROV:string=u.PROV.toLowerCase().;
return PROV.indexOf(searchInput) > -1;
});
}
你能帮我一下吗?
最佳答案
由于您使用过滤列表向下拉列表提供值,因此一旦该过滤列表不再包含该值,它就会重置。
使用您的代码,您可能应该使用以下内容:
HTML:
<mat-form-field appearance="fill">
<mat-label>Providers</mat-label>
<mat-select multiple [formControl]="providers" (openedChange)="onOpenChange(multiUserSearch)">
<mat-select-trigger>
{{providers.value }}
</mat-select-trigger>
<input #multiUserSearch type="text" autocomplete="off" matInput placeholder="Search By Provider" (input)="onInputChange($event)"/>
<mat-option *ngFor="let provider of filteredProviders" [value]="provider.PROV">{{provider.PROV}}</mat-option>
</mat-select>
</mat-form-field>
组件:
export class SelectMultipleExample {
providers = new FormControl();
allProviders: any[] = [{ PROV: "aaa" }, { PROV: "aab" }, { PROV: "aac" }];
filteredProviders: any[] = this.allProviders;
onInputChange(event: any) {
const searchInput = event.target.value.toLowerCase();
this.filteredProviders = this.allProviders.filter(({ PROV }) => {
const prov = PROV.toLowerCase();
return prov.includes(searchInput);
});
}
onOpenChange(searchInput: any) {
searchInput.value = "";
this.filteredProviders = this.allProviders;
}
}
也就是说,不确定我是否会自己实现此类功能,因为这里有很多边缘情况。您可能应该使用现有的库来执行此操作。
关于angular - 如何在 Angular Material 的多选下拉菜单中实现搜索功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66907838/