Angular2 select box

select box

-select box에서 *ngFor와 *ngIf를 동시에 사용하고 싶을 때가 있다. 이럴 때에는 template를 이용하면 된다.

<select class="form-control" [(ngModel)]="model.product" name="product">
 <template ngFor #productList let-productList [ngForOf]="availableProducts">
  <option *ngIf="productList.diskofferingid" [value]="productList.zoneid">{{ productList.serviceofferingdesc }}</option>
 </template>
</select>

value값을 object로 넘기고 싶을 때에는 [ngValue] selector를 사용하면 된다.

<select class="form-control" [(ngModel)]="model.product" name="product">
 <template ngFor #productList let-productList [ngForOf]="availableProducts">
  <option *ngIf="productList.diskofferingid" [ngValue]="productList">{{ productList.serviceofferingdesc }}</option>
 </template>
</select>

[value]=”…”는 string만 지원하지만, [ngValue]=”…”는 모든 type를 지원한다.