在 angular 使用 material 开发时,如果需要一个输入框,既可以自行输入值,还可以点击下拉选择预设的选项输入值,可以使用 autocomplete 标签。
需要引入 MatAutocompleteModule 模块
import {MatAutocompleteModule} from '@angular/material/autocomplete';
在 xxx.ts 中定义了下拉选项,例如:
options = [
{ value: '00:30:00', column: '30分钟' },
{ value: '01:00:00', column: '1小时' },
{ value: '01:30:00', column: '90分钟' },
{ value: '02:00:00', column: '2小时' },
{ value: '05:00:00', column: '5小时' }
];
在 xxx.html 中使用示例如下:
持续时间:
{{option.column}}
得到的效果如下: