Angular のドロップダウンリストで値を選択する
Angular 2 では、ngOptions ディレクティブを使用してドロップダウンリストを作成し、ngFor ディレクティブを使用してドロップダウン値を反復処理し、ngif を使用して値を選択します。この記事では、Angular でドロップダウンリストを選択する方法を説明します。
Angular 2 のドロップダウンリストで値を選択する手順
ドロップダウンリストから値を選択することは、Web アプリケーションで最も一般的なタスクの 1つです。
Angular 2 のドロップダウンリストで値を選択するには、次の手順が必要です。
-
コードエディタを開きます。
-
ドロップダウンリストを作成します。
-
アイテムを追加するためのドロップダウンリストを開くためのボタンを追加します。
-
すべてのアイテムを表形式で表示するには、
ng-forディレクティブを使用して空のdiv要素を追加します。 -
クリックすると、このビューで行われた変更を閉じて保存する関数を呼び出すボタンを追加します。
-
ngifディレクティブを追加して、適切なオプションを選択します。
上記の手順を適用する例を書いてみましょう。
TypeScript コード（App.component.ts）：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedOption = 0;
actions = [{ id: 0, name: 'Select Country' },
{ id: 1, name: 'Netherland' },
{ id: 2, name: 'England' },
{ id: 3, name: 'Scotland' },
{ id: 4, name: 'Germany' },
{ id: 5, name: 'Canada' },
{ id: 6, name: 'Mexico' },
{ id: 7, name: 'Spain' }]
}
セレクターとテンプレートは、@Component メタデータオブジェクトの 2つのフィールドです。セレクターフィールドは、コンポーネントを表す HTML 要素のセレクターを指定します。
テンプレートは、このコンポーネントのビューを表示する方法を Angular に指示します。HTML ファイルに URL を追加するか、ここに HTML を配置することができます。
この例では、URL を使用して HTML テンプレートをポイントしています。その後、出力端子に表示するオプションを記述しました。
TypeScript コード：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
@NgModule は、モジュールのメタデータを定義します。BrowserModule は重要なアプリサービスプロバイダーを追跡します。
また、ngIf や ngFor などの標準ディレクティブも含まれています。これらは、任意のモジュールのコンポーネントテンプレートに表示され、すぐに使用できます。ngModel ディレクティブには、FormsModule モジュールが必要です。
宣言リストは、アプリ要素と、アプリコンポーネント階層の先頭にあるルート要素を指定します。宣言配列には、モジュール、コマンド、およびパイプのリストが含まれています。
HTML コード（App.component.html）：
<h2>Example of how to select the value in the dropdown list in Angular 2</h2>
<select id="select-menu" [(ngModel)]="selectedOption" class="bx--text-input" required name="actionSelection" >
<option *ngFor="let action of actions" [value]="action.id">{{action.name}}</option>
</select>
<div>
<div *ngIf="selectedOption==1">
<div>Netherland is selected</div>
</div>
<div *ngIf="selectedOption==2">
<div>England is selected</div>
</div>
<div *ngIf="selectedOption==3">
<div>Scotland is selected</div>
</div>
<div *ngIf="selectedOption==4">
<div>Germany is selected</div>
</div>
<div *ngIf="selectedOption==5">
<div>Canada is selected</div>
</div>
<div *ngIf="selectedOption==6">
<div>Mexico is selected</div>
</div>
<div *ngIf="selectedOption==7">
<div>Spain is selected</div>
</div>
</div>
このコードでは、ngfor と ngif の 2つのディレクティブを使用しました。
ngfor ディレクティブは、アイテムのリストを作成するために使用されます。これは、単純な配列でも、いくつかのプロパティが配列に変換されたオブジェクトでもかまいません。
ngfor ディレクティブは通常、配列を反復処理し、リスト内のアイテムごとに異なる DOM 要素をレンダリングするために使用されます。ここで、ngfor の目的は国のリストを作成することです。
次に、if-else ステートメントを作成する Angular のディレクティブである ngif を使用しました。ngElse、ngSwitch、および ngShow/ngHide と一緒に使用することもできます。
ディレクティブは、式が true と評価された場合にのみ HTML コードをレンダリングします。false と評価された場合、何もレンダリングされません。
ここで、ngif は選択した国のみを表示します。
ここをクリックして、上記のコードのライブデモを確認してください。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook