Ausgewählte Option im Angular-Dropdown

Wir stellen vor, wie Sie eine ausgewählte Option in einem Angular-Dropdown-Menü festlegen, eine ausgewählte Option aus einem Array von Optionen festlegen und eine ausgewählte Option festlegen, wenn Optionen in Angular dynamisch sind.

Ausgewählte Option in Angular Dropdown setzen

In diesem Artikel wird das Festlegen einer ausgewählten Option für das Angular-Dropdown erläutert. Beim Erstellen eines Dropdowns mit mehreren Optionen wird keine Option automatisch ausgewählt.

Wir werden also zuerst ein Dropdown-Menü erstellen und eine ausgewählte Option festlegen, und wir werden verschiedene Szenarien besprechen, wie eine ausgewählte Option am besten festgelegt werden kann, wenn Optionen statisch oder dynamisch sind oder wenn wir eine Reihe von Optionen haben.

In der app.component.html erstellen wir ein ausgewähltes Formular.

# angular
<select [(ngModel)]='ngDropdown' name="dropdownOption" id="dropdownOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Wie in diesem Code zu sehen ist, haben wir [(ngModel)] verwendet, wodurch eine FormControl-Instanz erstellt und an ein Formularsteuerelement gebunden wird.

Wir werden etwas CSS in app.component.css hinzufügen, um unser Dropdown-Formular zu verbessern.

# angular
.form-control{
  padding: 5px 10px;
  background-color: rgb(52, 119, 179);
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: rgb(52, 119, 179);
}

Ausgabe:

Wir können sehen, dass keine Option ausgewählt ist, aber alle Optionen werden angezeigt, wenn Sie darauf klicken.

Um eine Option als ausgewählt zu setzen, können wir den Wert der Variablen ngDropdown in der app.component.ts zuweisen. Wenn wir unseren Code aus der app.component.html betrachten, sehen wir, dass wir die Variable [(ngModel)]='ngDropdown' bereits zugewiesen haben.

Versuchen wir, 1 als Standardwert einzustellen.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngDropdown = 1;
}

Nach dem Zuweisen der ausgewählten Option stellen wir fest, dass das Dropdown-Menü 1 als ausgewählte Option anzeigt. Auf diese Weise können wir jede Option als ausgewählte Option in Angular auswählen.

Ausgabe:

Ausgewählte Option aus einem Array von Optionen festlegen

Wir werden besprechen, wie Sie einen Standardwert aus einem Array von Optionen festlegen.

Zunächst erstellen wir zwei Variablen: ngDropdown, die Standardoption für unser Dropdown-Menü, und die zweite ist ngOptions, die alle Optionen enthält, die wir in den Dropdown-Optionen anzeigen möchten.

Also fügen wir diesen Code in app.component.ts ein.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [1,2,3,4,5,6,7,8,9,10]
  ngDropdown = 1;
}

Im Array ngOptions setzen wir Werte von 1 bis 10; in ngDropdown setzen wir 1 als Standardwert.

Wir erstellen ein ausgewähltes Formular in der app.component.html.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

In diesem Code sehen wir, dass wir [selected] auf ngDropdown setzen, sodass es automatisch ausgewählt wird, wenn eine Option mit ngDropdown identisch ist.

Ausgabe:

Ausgewählte Option aus Dynamische Werte

Wir werden das Festlegen einer ausgewählten Option besprechen, wenn wir dynamische Werte für Optionen haben. Zuerst erstellen wir zwei Variablen; Eines wird ngDropdown sein, die Standardoption für unser Auswahlformular, und das zweite wird ngOptions sein, das alle Werte enthält, die wir in den Dropdown-Optionen anzeigen möchten.

Wir wissen, dass es dynamische Werte geben wird, also lassen Sie uns ein Zufallszahlen-Array haben und die ausgewählte Option für das zweite Element in diesem Array festlegen.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [3,6,1,4,2,10,7,5,9,8]
  ngDropdown = this.ngOptions[1];
}

Die app.component.html hat den folgenden Code.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Ausgabe:

Wir können also sehen, dass das zweite Element dieses Arrays als ausgewählte Option festgelegt ist. Wir können dies ändern, indem wir den Index eines Arrays ändern.

In diesem Tutorial haben wir gelernt, wie Sie die ausgewählte Option für das Dropdown-Menü Angular festlegen. Wir haben auch drei verschiedene Szenarien zur Auswahl von Optionen besprochen, wenn Werte statisch, dynamisch oder ein Array sind.