Angular でデフォルト値を設定する

1. Angular でデフォルト値を設定する
2. Angular のオプションの配列からデフォルト値を設定する
3. Angular の動的値からデフォルト値を選択

select フォームでデフォルト値を設定する方法、オプションの配列からデフォルト値を設定する方法、およびオプションが Angular で動的である場合はデフォルト値を設定する方法を学習します。

Angular でデフォルト値を設定する

このチュートリアルでは、Angular で選択タグのデフォルト値を設定する方法について説明します。複数のオプションを使用して select フォームを作成する場合、デフォルト値は自動的に選択されません。

したがって、最初に 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;
}

デフォルト値を割り当てた後、select フォームに現在のデフォルト値として 1 が表示されていることがわかります。このようにして、Angular のデフォルト値として任意の値を選択できます。

出力：

Angular のオプションの配列からデフォルト値を設定する

オプションの配列からデフォルト値を設定する方法について説明します。

まず、2つの変数を作成します。select フォームのデフォルトオプションである 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 に select フォームを作成します。

# 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 の動的値からデフォルト値を選択

オプションに動的な値がある場合は、デフォルト値の設定について説明します。

まず、2つの変数を作成します。select フォームのデフォルトオプションである 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 フォームのデフォルト値を設定する方法を学びました。また、静的値、動的値、または配列値を持つ 3つのデフォルト値についても説明しました。