Açısal Malzeme 7 - Otomatik Tamamlama

<mat-autocomplete>bir Açısal Yönerge, özel bir sorgu ile tüm olası eşleşmeleri göstermek için yerleşik bir açılır menüye sahip özel bir giriş denetimi olarak kullanılır. Bu kontrol, kullanıcı giriş alanına yazdığı anda gerçek zamanlı bir öneri kutusu görevi görür.<mat-autocomplete> yerel veya uzak veri kaynaklarından arama sonuçları sağlamak için kullanılabilir.

Bu bölümde, Angular Material kullanarak bir otomatik tamamlama kontrolü çizmek için gereken konfigürasyonu göstereceğiz.

Açısal Uygulama Oluşturun

Angular 6 - Project Setup bölümünde oluşturduğumuz Angular uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım	Açıklama
1	Angular 6 - Project Setup bölümünde açıklandığı gibi materialApp adıyla bir proje oluşturun .
2	Değiştir app.module.ts , app.component.ts , app.component.css ve app.component.html olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3	Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır 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 { }

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir 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>

Aşağıda, değiştirilmiş CSS dosyasının içeriği verilmiştir app.component.css.

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

Değiştirilen ts dosyasının içeriği aşağıdadır 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
         };
      });
   }
}

Sonuç

Sonucu doğrulayın.

Detaylar

• İlk olarak, bir giriş kutusu oluşturduk ve adlı bir otomatik tamamlamayı bağladık auto [matAutocomplete] özelliğini kullanarak.

• Ardından, adlı bir otomatik tamamlama oluşturduk auto mat-autocomplete etiketi kullanarak.

• Daha sonra, * ng For döngüsü kullanılarak seçenekler oluşturulur.