如何在角度7中使用选择2掺杂列表

时间:2019-07-16 12:12:11

标签: angular

我在Angular 6中使用了引导程序。我的页面上有许多下拉菜单,并希望实现该功能,因为应该有一个文本框,该文本框重点显示数组中的数据,而键入则显示自动完成功能。

1 个答案:

答案 0 :(得分:0)

Angular Material已实现自动完成功能。
1-将材料库导入到app-module.ts

import {MatAutocompleteModule} from '@angular/material/autocomplete';

2-在HTML中使用以下代码

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

这里的“选项”是包含自动完成列表的数组。

options: string[] = ['One', 'Two', 'Three'];

StackBlitz链接-https://stackblitz.com/angular/yvynpjydopq?file=app%2Fautocomplete-simple-example.ts