オプションには、ViewChildとローカルテンプレート変数を使用できます。
ローカルテンプレートを追加するようにビューを変更します。
<select class="form-control" [(ngModel)]="data" name="data" (ngModelChange)="onSortChange($event)">
<option [ngValue]="{data:'car', color: 'green'}">green car</option>
<option [ngValue]="{data:'engine', color: 'blue'}">blue engine</option>
</select>
コントローラでは、オプションにアクセスして、選択する属性を選択することができます。
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
moduleId: module.id,
templateUrl: 'home.component.html'
})
export class HomeComponent implements OnInit {
@ViewChild('carSelect') carSelect: ElementRef;
constructor() { }
ngOnInit() { }
setSelected(): void {
this.carSelect.nativeElement.children[0].selected = true;
}
}