選択したオプションテキストをオンにする

Question

選択したオプションを取得する方法を知っています値選択が変更された場合（下に示すように）、表示される方法

テンプレート：

<select (change)="onChange($event.target.value)"> 
    <option *ngFor="let option of activeDropdown.options" value="{{option.value}}"> 
     {{option.text}} 
    </option> 
</select> 

コンポーネント：

onChange(value: string) { 
    console.log(value); 
} 

ありがとう！

Answer 1

あなたはngValueにオブジェクトを渡すと、使用する必要がありngModel：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <select [ngModel]="active" (ngModelChange)="onChange($event)"> 
     <option *ngFor="let option of activeDropdown.options" [ngValue]="option"> 
     {{option.text}} 
     </option> 
    </select> 
    </div> 
    `, 
}) 
export class App { 
    activeDropdown; 
    constructor() { 
    this.active = {}; 
    this.activeDropdown = { 
     options: [{text: 'One', value: 1}, {text: 'Two', value: 2}] 
    } 
    } 

    onChange(event: string) { 
    console.log(event.text); 
} 
} 

Plunker

Answer 2

getSelectedOptionText(event: Event) { 
    let selectElementText = event.target['options'] 
     [event.target['options'].selectedIndex].text; 
     console.log(selectElementText);         
} 

HTML

<select name="" ngModel (change)="getSelectedOptionText($event)"> 
    <option *ngFor="let item of items" [value]="item.id">{{item.name}} 
    </option> 
</select>