Winkelmaterial 7 - Wählen Sie

Das <mat-select>, eine Winkelrichtlinie, wird für <select> verwendet, um das auf Materialdesign basierende Styling zu verbessern.

In diesem Kapitel wird die Konfiguration vorgestellt, die zum Zeichnen eines ausgewählten Steuerelements mit Angular Material erforderlich ist.

Erstellen Sie eine Winkelanwendung

Führen Sie die folgenden Schritte aus, um die Angular-Anwendung zu aktualisieren, die wir in Angular 6 - Projekt-Setup- Kapitel erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen materialApp, wie im Kapitel Angular 6 - Projekteinrichtung erläutert .
2	Ändern app.module.ts , app.component.ts , app.component.css und app.component.html wie unten erläutert. Lassen Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors 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 {MatSelectModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSelectModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Es folgt der Inhalt der geänderten ts-Datei app.component.ts.

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
export interface Food {
  value: string;
  display: string;
}
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   selectedValue: string; 
   foods: Food[] = [
      {value: 'steak', display: 'Steak'},
      {value: 'pizza', display: 'Pizza'},
      {value: 'tacos', display: 'Tacos'}
   ];
}

Es folgt der Inhalt der geänderten HTML-Hostdatei app.component.html.

<form>
   <h4>mat-select</h4>
   <mat-form-field>
      <mat-select placeholder = "Favorite food" 
         [(ngModel)] = "selectedValue" name = "food">
         <mat-option *ngFor = "let food of foods" 
            [value] = "food.value">
            {{food.display}}
         </mat-option>
      </mat-select>
   </mat-form-field>
   <p> Selected food: {{selectedValue}} </p> 
</form>

Ergebnis

Überprüfen Sie das Ergebnis.

Einzelheiten

• Als erstes haben wir eine Auswahl mit mat-select erstellt, die an ngModel gebunden ist.

• Dann haben wir Optionen mit mat-option hinzugefügt.