在 Angular 下拉選單中選擇選項

我們將介紹如何在 Angular 下拉選單中設定選定選項，從選項陣列中設定選定選項，以及如果選項在 Angular 中是動態的，則設定選定選項。

在 Angular 下拉選單中設定選定選項

本文將討論為 Angular 下拉選單設定一個選定的選項。建立具有多個選項的下拉選單時，不會自動選擇任何選項。

因此，我們將首先建立一個下拉選單並設定選定選項，並在選項靜態或動態或有一系列選項時討論設定選定選項的最佳方法中討論不同的方案。

在 app.component.html 中，我們將建立一個選擇表單。

# 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>

正如在這段程式碼中看到的，我們使用了 [(ngModel)]，它建立了一個 FormControl 例項並將其繫結到一個表單控制元件元素。

我們將在 app.component.css 中新增一些 CSS 來改進我們的下拉表單。

# 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);
}

輸出：

我們可以看到沒有選擇任何選項，但是單擊它時會出現所有選項。

要將選項設定為選中，我們可以將值分配給 app.component.ts 中的變數 ngDropdown。檢視 app.component.html 中的程式碼，我們會看到我們已經分配了變數 [(ngModel)]='ngDropdown'。

讓我們嘗試將 1 設定為預設值。

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

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

分配選定選項後，我們注意到下拉選單顯示 1 作為選定選項。這樣，我們可以選擇任何選項作為 Angular 中的選定選項。

輸出：

從選項陣列中設定選定的選項

我們將討論如何從一組選項中設定預設值。

首先，我們將建立兩個變數：ngDropdown，我們的下拉選單的預設選項，第二個是 ngOptions，它將包含我們想要在下拉選項中顯示的所有選項。

所以，讓我們在 app.component.ts 中新增這段程式碼。

# 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;
}

在 ngOptions 陣列中，我們將值從 1 設定為 10；在 ngDropdown 中，我們將 1 設定為預設值。

我們將在 app.component.html 中建立一個選擇表單。

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

在這段程式碼中，我們將看到我們將 [selected] 設定為 ngDropdown，因此當任何選項與 ngDropdown 相同時，它將自動被選中。

輸出：

從動態值中選擇的選項

如果我們有選項的動態值，我們將討論設定一個選定的選項。首先，我們將建立兩個變數；第一個是 ngDropdown，我們選擇表單的預設選項，第二個是 ngOptions，它將包含我們想要在下拉選項中顯示的所有值。

我們知道會有動態值，所以讓我們有一個隨機數陣列併為該陣列中的第二項設定選定的選項。

# 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];
}

app.component.html 將具有以下程式碼。

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

輸出：

因此，我們可以看到該陣列的第二項設定為選定選項。我們可以通過改變陣列的索引來改變它。

本教程教我們如何設定 Angular 下拉選單的選定選項。我們還討論了當值為靜態、動態或陣列時選擇選項的三種不同場景。