在 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}}
      
    
  

得到的效果如下:

INPUT可下拉可直接输入