2016-10-05 15 views
2

次の中で最初のオプションを選択するにはどうすればいいですか?角2の最初のオプションを選択

<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> 

答えて

2

オプションには、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; 
    } 
} 
関連する問題