要解决Angular Material自动完成组件不保留选择的问题,可以使用[(ngModel)]
或(optionSelected)
来处理选择的值。
下面是一个示例代码,演示如何解决这个问题:
HTML模板:
{{ option }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-autocomplete',
templateUrl: './autocomplete.component.html',
styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent {
options: string[] = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
filteredOptions: string[] = [];
selectedValue: string = '';
filterOptions(value: string) {
this.filteredOptions = this.options.filter(option =>
option.toLowerCase().includes(value.toLowerCase())
);
}
optionSelected(event: any) {
this.selectedValue = event.option.value;
}
}
在上面的代码中,options
数组包含所有可选的选项。然后,filterOptions
方法根据输入的值来筛选出匹配的选项,并将它们存储在filteredOptions
数组中。[(ngModel)]
指令用于将输入框的值与selectedValue
变量双向绑定,以便在选择选项时更新输入框的值。optionSelected
方法在选择选项时被调用,将选择的值保存在selectedValue
变量中。
这样,即使选择了一个选项,再次输入时输入框也会显示之前输入的值。