Angularでのselect要素での[(ngModel)]の使用方法


以下に、[(ngModel)]を使用したselect要素の例を示します。

<select [(ngModel)]="selectedOption">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

上記の例では、selectedOptionというコンポーネントのプロパティを選択されたオプションの値にバインドしています。選択されたオプションの値は、selectedOptionに自動的に反映されます。

また、選択された値の変更を検知するために、ngModelChangeイベントを使用することもできます。以下に例を示します。

<select [(ngModel)]="selectedOption" (ngModelChange)="onOptionChange($event)">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

上記の例では、onOptionChangeというコンポーネントのメソッドを定義し、選択された値の変更時に呼び出しています。

以上が、Angularでselect要素で[(ngModel)]を使用する方法の簡単な例です。これによって、選択された値をコンポーネント内で利用したり、他の処理に使用したりすることができます。