Angular Material 7 自动完成

The <垫子自动完成> ，一个 Angular 指令，被用作一个特殊的输入控件，带有一个内置的下拉菜单来显示自定义查询的所有可能匹配项。只要用户在输入区域中键入，此控件就充当实时建议框。 <垫子自动完成> 可用于提供来自本地或远程数据源的搜索结果。

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

创建 Angular 应用程序

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

以下是修改后的模块描述符的内容 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,Mat输入Module} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatAutocompleteModule,
        Mat输入Module,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

<form class = "tp-form">
    <mat-form-field class = "tp-full-width">
        <input type = "text"
            placeholder = "US State"
            aria-label = "Number"
            mat输入
            [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>

以下是修改后的 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();
    }
    // 将状态列表构建为键值对映射
    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
            };
        });
    }
}

Result

验证结果。

Details

• 首先，我们创建了一个输入框并绑定了一个名为 auto 使用 [matAutocomplete] 属性。

• 然后，我们创建了一个名为 auto 使用垫自动完成标签。

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