Standardwert in Angular setzen

1. Standardwert in Angular setzen
2. Standardwert aus einem Array von Optionen in Angular setzen
3. Standardwert aus dynamischen Werten in Angular auswählen

Wir werden lernen, wie man einen Standardwert in einem select-Formular festlegt, einen Standardwert aus einem Array von Optionen festlegt und einen Standardwert festlegt, wenn Optionen in Angular dynamisch sind.

Standardwert in Angular setzen

In diesem Tutorial wird erläutert, wie Sie einen Standardwert für ein ausgewähltes Tag in Angular festlegen. Beim Erstellen eines select-Formulars mit mehreren Optionen wird kein Standardwert automatisch ausgewählt.

Daher werden wir zuerst ein Auswahlformular erstellen und einen Standardwert festlegen, und wir werden verschiedene Szenarien diskutieren, wie ein Standardwert am besten festgelegt werden kann, wenn Optionen statisch oder dynamisch sind oder wenn wir eine Reihe von Optionen haben.

In app.component.html erstellen wir ein select-Formular.

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

Wir werden CSS in app.component.css hinzufügen, damit unser select-Formular besser aussieht.

# angular
.form-control{
  padding: 5px 10px;
  background-color: DodgerBlue;
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: dodgerblue;
}

Ausgabe:

Sie können sehen, dass kein Standardwert ausgewählt ist, aber alle Optionen werden angezeigt, wenn wir darauf klicken.

Um einen beliebigen Wert als Standard festzulegen, können wir den Wert der Variablen ngSelect in app.component.ts zuweisen. Wenn Sie unseren Code von app.component.html sehen, können Sie sehen, dass wir die Variable [(ngModel)]='ngSelect' bereits zugewiesen haben.

Versuchen wir nun, 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  {
  ngSelect = 1;
}

Nachdem wir den Standardwert zugewiesen haben, werden wir feststellen, dass das Auswahlformular 1 als aktuellen Standardwert anzeigt. Auf diese Weise können wir in Angular einen beliebigen Wert als Standardwert auswählen.

Ausgabe:

Standardwert aus einem Array von Optionen in Angular setzen

Wir werden das Festlegen eines Standardwerts aus einer Reihe von Optionen besprechen.

Zunächst erstellen wir zwei Variablen: ngSelect, die Standardoption für unser Auswahlformular, und die zweite ist options, die alle Werte enthält, die wir in Select-Optionen anzeigen möchten.

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  {
  options = [1,2,3,4,5,6,7,8,9,10]
  ngSelect = 1;
}

Im Array options setzen wir Werte von 1 bis 10; in ngSelect setzen wir 1 als Default-Wert.

Wir erstellen das Auswahlformular in app.component.html.

# angular
<select class='form-control' id="selectOptions">
<option *ngFor="let opt of options"
[selected]="opt === ngSelect"
[value]="opt">
    {{ opt }}
</option>
</select>

In diesem Code können Sie sehen, dass wir [ausgewählt] auf ngSelect gesetzt haben. Wenn also eine Option mit ngSelect identisch ist, wird sie automatisch ausgewählt.

Ausgabe:

Standardwert aus dynamischen Werten in Angular auswählen

Wir werden das Festlegen eines Standardwerts besprechen, wenn wir dynamische Werte für Optionen haben.

Zunächst erstellen wir zwei Variablen: ngSelect, die Standardoption für unser Auswahlformular, und die zweite ist options, die alle Werte enthält, die wir in Select-Optionen anzeigen möchten.

Wir wissen, dass es dynamische Werte geben wird, also haben wir ein Zufallszahlen-Array und legen den Standardwert für das erste Element in diesem Array fest.

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

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

app.component.html enthält den folgenden Code.

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

Ausgabe:

Sie können sehen, dass das erste Element dieses Arrays als Standardwert festgelegt ist. Wir können dies ändern, indem wir den Index eines Arrays ändern.

In diesem Tutorial haben wir gelernt, den Standardwert für das select-Formular in Angular festzulegen. Wir haben auch drei Standardwerte mit statischen, dynamischen oder Array-Werten besprochen.