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