📌  相关文章
📜  角材料7-自动完成

📅  最后修改于: 2020-10-28 04:45:49             🧑  作者: Mango

（一个角度指令）用作带有内置下拉菜单的特殊输入控件，以显示与自定义查询的所有可能匹配项。用户在输入区域中键入内容后，此控件就充当实时建议框。 可用于提供来自本地或远程数据源的搜索结果。

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

创建角度应用

请按照以下步骤更新我们在Angular 6-Project Setup一章中创建的Angular应用程序–

Step Description
1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter.
2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下是修改后的模块描述符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 { }

以下是修改后的HTML主机文件app.component.html的内容。


   
      
      
         
            {{state.display}}

以下是修改后的CSS文件app.component.css的内容。

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

以下是修改后的ts文件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标签创建了一个名为auto的自动完成功能。

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