在 Angular 中設定預設值
我們將學習如何在 select 表單中設定預設值，從選項陣列中設定預設值，以及如果選項在 Angular 中是動態的，則設定預設值。
在 Angular 中設定預設值
本教程將討論如何在 Angular 中為選擇標籤設定預設值。建立具有多個選項的 select 表單時，不會自動選擇預設值。
因此，我們將首先建立一個選擇表單並設定預設值，並且我們將在選項靜態或動態或有一系列選項時設定預設值的最佳方式，我們將討論不同的方案。
在 app.component.html 中，我們將建立一個 select 表單。
# 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>
我們將在 app.component.css 中新增 CSS 以使我們的 select 表單看起來更好。
# 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;
}
輸出：
你可以看到沒有選擇預設值，但是當我們單擊它時會出現所有選項。
要將任何值設定為預設值，我們可以將值分配給 app.component.ts 中的變數 ngSelect。如果你從 app.component.html 中檢視我們的程式碼，你可以看到我們已經分配了變數 [(ngModel)]='ngSelect'。
現在讓我們嘗試將 1 設定為預設值。
# angular
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
ngSelect = 1;
}
指定預設值後，我們會注意到選擇表單顯示 1 作為當前預設值。這樣，我們可以選擇任何值作為 Angular 中的預設值。
輸出：
從 Angular 的選項陣列中設定預設值
我們將討論從一組選項中設定預設值。
首先，我們將建立兩個變數：ngSelect，我們選擇表單的預設選項，第二個是 options，它將包含我們想要在選擇選項中顯示的所有值。
讓我們將此程式碼新增到 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 {
options = [1,2,3,4,5,6,7,8,9,10]
ngSelect = 1;
}
在 options 陣列中，我們設定從 1 到 10 的值；在 ngSelect 中，我們將 1 設定為預設值。
我們將在 app.component.html 中建立選擇表單。
# angular
<select class='form-control' id="selectOptions">
<option *ngFor="let opt of options"
[selected]="opt === ngSelect"
[value]="opt">
{{ opt }}
</option>
</select>
在這段程式碼中，你可以看到我們已經將 [selected] 設定為 ngSelect，所以當任何選項與 ngSelect 相同時，它會自動被選中。
輸出：
從 Angular 的動態值中選擇預設值
如果我們有選項的動態值，我們將討論設定預設值。
首先，我們將建立兩個變數：ngSelect，我們選擇表單的預設選項，第二個是 options，它將包含我們想要在選擇選項中顯示的所有值。
我們知道會有動態值，所以讓我們有一個隨機數陣列併為該陣列中的第一項設定預設值。
# 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 將具有以下程式碼。
# angular
<select class="form-control" id="selectOptions">
<option
*ngFor="let opt of options"
[selected]="opt === ngSelect"
[value]="opt"
>
{{ opt }}
</option>
</select>
輸出：
你可以看到該陣列的第一項設定為預設值。我們可以通過改變陣列的索引來改變它。
本教程教我們在 Angular 中為 select 表單設定預設值。我們還討論了靜態、動態或陣列值的三個預設值。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn