只言片语——angular material input输入框可以辅助下拉选择

在 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 中使用示例如下：

  <span>持续时间：</span>
  <mat-form-field style="width:150px">
    <input placeholder="自行输入或下拉选择" matInput [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option.value">
        {{option.column}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

得到的效果如下：