back
選択リストを使いこなす (4/6)
■テンプレートを修正する
では、テンプレート側を修正しましょう。app.component.htmlのサンプルを下に掲載しておきます。これを参考にテンプレートを完成させましょう。
ここでは、<select>内に用意する項目の<option>タグで以下のようにして項目を生成しています。
この「ngFor」というのは、このタグを繰り返し実行し出力させるためのものです。ここでは「let item of items」と指定があります。これにより、itemsから順に値を取り出しては変数itemに代入する、といったことを繰り返していきます。
このitemは、[value]でvalue属性に、更にその後の{{item}}で値として出力されます。
この他、<select>タグのngModelやsizeの設定などは、先ほどのサンプルと基本的に同じですからそう難しくはないでしょう。
ここでは、<select>内に用意する項目の<option>タグで以下のようにして項目を生成しています。
<option *ngFor="let item of items" [value]="item">{{item}}</option>この「ngFor」というのは、このタグを繰り返し実行し出力させるためのものです。ここでは「let item of items」と指定があります。これにより、itemsから順に値を取り出しては変数itemに代入する、といったことを繰り返していきます。
このitemは、[value]でvalue属性に、更にその後の{{item}}で値として出力されます。
この他、<select>タグのngModelやsizeの設定などは、先ほどのサンプルと基本的に同じですからそう難しくはないでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<div class="rect">
<h1>AppComponent</h1>
<p>{{message}}</p>
<form>
<select [(ngModel)]="model.select" [size]="items.length">
<option *ngFor="let item of items" [value]="item">{{item}}</option>
</select>
<input type="button" (click)="onSubmit();" value="click">
</form>
</div>
| << 前へ | 次へ >> |