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

最新推荐文章于 2022-01-21 20:05:15 发布

原创最新推荐文章于 2022-01-21 20:05:15 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular #material #autocomplete

本文介绍如何在Angular项目中使用Material的Autocomplete组件，实现输入框既能手动输入也能从下拉列表中选择预设选项的功能。通过示例代码详细展示了如何引入MatAutocompleteModule模块，定义下拉选项及在html文件中的具体应用。

部署运行你感兴趣的模型镜像

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

得到的效果如下：

INPUT可下拉可直接输入.gif