Angular Material 7 自动完成（Auto-Complete）

  <mat-autocomplete>是一个Angular Material 指令，被用作一个特殊的输入控件，带有一个内置的下拉列表来显示与自定义查询的所有可能匹配。一旦用户在输入区域中键入，该控件就充当实时意见箱。<mat-autocomplete>可用于提供本地或远程数据源的搜索结果。

  在本章中，我们将展示使用Angular Material绘制自动完成控件所需的配置。

创建Angular应用

  按照以下步骤更新我们在Angular 6 -项目设置章节中创建的Angular 应用程序

步骤 描述

1 创建一个名为materialApp的项目。

2 修改app.module.ts, app.component.ts, app.component.css和app.component.html。其余文件不变。

3 编译并运行应用程序来验证实现的逻辑的结果。

  以下是修改后的app.module.ts的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatAutocompleteModule,MatInputModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatAutocompleteModule,
      MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

  以下是修改后的app.component.html的内容。

<form class = "tp-form">
   <mat-form-field class = "tp-full-width">
      <input type = "text" 
         placeholder = "US State" 
         aria-label = "Number" 
         matInput 
         [formControl] = "myControl" 
         [matAutocomplete] = "auto">
      <mat-autocomplete #auto = "matAutocomplete">
         <mat-option *ngFor = "let state of states" [value] = "state.value">
            {{state.display}}
         </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</form>

   以下是修改后的 app.component.css的内容

.tp-form {
   min-width: 150px;
   max-width: 500px;
   width: 100%;
}
.tp-full-width {
   width: 100%;
}

  以下是修改后的app.component.ts的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   myControl = new FormControl();
   states;
   constructor(){
      this.loadStates();
   }
   //build list of states as map of key-value pairs
   loadStates() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
         Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
         Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
         Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
         North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
         South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
         Wisconsin, Wyoming';
      this.states =  allStates.split(/, +/g).map( function (state) {
         return {
            value: state.toUpperCase(),
            display: state
         };
      });
   }
}

结果

  验证结果

细节

  首先，我们创建了一个输入框，并使用[matAutocomplete]属性绑定了一个名为auto的自动完成功能。

  然后，我们使用mat-autocomplete标签创建了一个名为autocomplete的自动完成控件。

  接下来，使用*ng For循环创建选项。