Einen Wert in einer Dropdown-Liste in Angular auswählen

In Angular 2 wird die Direktive ngOptions verwendet, um eine Dropdown-Liste zu erstellen, die Direktive ngFor, um Dropdown-Werte zu durchlaufen, und die Direktive ngif, um einen Wert auszuwählen. Dieser Artikel zeigt, wie Sie die Dropdown-Liste in Angular auswählen.

Schritte zum Auswählen eines Werts in einer Dropdown-Liste in Angular 2

Die Auswahl eines Werts aus einer Dropdown-Liste ist eine der häufigsten Aufgaben in einer Webanwendung.

Die folgenden Schritte sind erforderlich, um einen Wert in der Dropdown-Liste in Angular 2 auszuwählen.

Lassen Sie uns ein Beispiel schreiben, um die oben genannten Schritte anzuwenden.

TypeScript-Code (App.component.ts):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    selectedOption = 0;
    actions = [{ id: 0, name: 'Select Country' },
    { id: 1, name: 'Netherland' },
    { id: 2, name: 'England' },
    { id: 3, name: 'Scotland' },
    { id: 4, name: 'Germany' },
    { id: 5, name: 'Canada' },
    { id: 6, name: 'Mexico' },
    { id: 7, name: 'Spain' }]
}

Ein Selektor und eine Vorlage sind die beiden Felder des Metadatenobjekts @Component. Das Auswahlfeld gibt einen Selektor für ein HTML-Element an, das die Komponente darstellt.

Die Vorlage weist Angular an, wie die Ansicht dieser Komponente angezeigt werden soll. Sie können entweder eine URL zu einer HTML-Datei hinzufügen oder HTML hier einfügen.

In diesem Beispiel haben wir die URL verwendet, um auf die HTML-Vorlage zu verweisen. Danach haben wir die Optionen geschrieben, die im Ausgabeterminal angezeigt werden sollen.

TypeScript-Code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, HelloComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Das @NgModule definiert die Metadaten für das Modul. BrowserModule behält den Überblick über wichtige App-Dienstleister.

Es enthält auch Standarddirektiven wie ngIf und ngFor, die sofort in den Komponentenvorlagen jedes Moduls erscheinen und verwendet werden können. Die Direktive ngModel erfordert das Modul FormsModule.

Die Deklarationsliste gibt das App-Element und das Stammelement an, das sich am Anfang der App-Komponentenhierarchie befindet. Das Deklarations-Array enthält eine Liste der Module, Befehle und Pipes.

HTML-Code (App.component.html):

<h2>Example of how to select the value in the dropdown list in Angular 2</h2>
<select id="select-menu" [(ngModel)]="selectedOption" class="bx--text-input" required name="actionSelection" >
        <option  *ngFor="let action of actions"  [value]="action.id">{{action.name}}</option>
    </select>
<div>
    <div *ngIf="selectedOption==1">
        <div>Netherland is selected</div>
    </div>
    <div *ngIf="selectedOption==2">
        <div>England is selected</div>
    </div>
    <div *ngIf="selectedOption==3">
        <div>Scotland is selected</div>
    </div>
    <div *ngIf="selectedOption==4">
        <div>Germany is selected</div>
    </div>
    <div *ngIf="selectedOption==5">
        <div>Canada is selected</div>
    </div>
    <div *ngIf="selectedOption==6">
        <div>Mexico is selected</div>
    </div>
    <div *ngIf="selectedOption==7">
        <div>Spain is selected</div>
    </div>
</div>

In diesem Code haben wir zwei Direktiven verwendet, ngfor und ngif.

Die Direktive ngfor wird verwendet, um eine Liste von Elementen zu erstellen. Dies kann ein einfaches Array oder ein Objekt mit einigen Eigenschaften sein, die in ein Array umgewandelt wurden.

Die Direktive ngfor wird normalerweise verwendet, um über ein Array zu iterieren und verschiedene DOM-Elemente für jedes Element in der Liste zu rendern. Hier dient ngfor dazu, eine Länderliste zu erstellen.

Zweitens haben wir ngif verwendet, eine Direktive in Angular, die eine if-else-Anweisung erstellt. Es kann auch mit ngElse, ngSwitch und ngShow/ngHide verwendet werden.

Die Direktive rendert den HTML-Code nur, wenn der Ausdruck als wahr ausgewertet wird. Wenn es als falsch ausgewertet wird, wird nichts gerendert.

Hier zeigt ngif nur das ausgewählte Land an.

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.