获取选定的选项文本onChange

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>