Учебники

Угловой Материал 7 — Автозаполнение

Август 29, 2018

<Mat-autocomplete> , угловая директива, используется в качестве специального элемента управления вводом со встроенным раскрывающимся списком, чтобы показать все возможные совпадения с пользовательским запросом. Этот элемент управления действует как окно для подсказок в реальном времени, как только пользователь вводит данные в области ввода. <mat-autocomplete> может использоваться для предоставления результатов поиска из локальных или удаленных источников данных.

В этой главе мы продемонстрируем конфигурацию, необходимую для рисования элемента управления автозаполнением с использованием Angular Material.

Создать угловое приложение

Выполните следующие шаги, чтобы обновить приложение Angular, которое мы создали в Angular 6 — глава « Настройка проекта» —

шаг Описание
1 Создайте проект с именем materialApp, как описано в главе Angular 6 — Project Setup .
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 { }

Ниже приведено содержимое модифицированного файла хоста HTML 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>

Ниже приводится содержание измененного файла 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
         };
      });
   }
}

Результат

Проверьте результат.

Сначала мы создали поле ввода и связали автозаполнение с именем auto, используя атрибут [matAutocomplete].

Затем мы создали автозаполнение с именем auto с помощью тега mat-autocomplete.

Далее, используя цикл * ng For, создаются параметры.

44
Share: