在模板中访问下拉列表的选定值

Question

如何在模板中访问下拉列表的选定值？

<div> 
    <select> 
     <option *ngFor="let client of clients" [value]="client.id">{{ client.name }}</option> 
    </select> 
    </div> 

    <!-- here I can access clients, but not the selected client --> 

Answer 1

你可以选择的值这样的：

<div> 
    <select #selectedClient> 
     <option *ngFor="let client of clients" [value]="client.id">{{ client.name }}</option> 
    </select> 
    </div> 

    <!-- here I can access clients, but not the selected client --> 
    <p>{{selectedClient.value}}</p> 

希望它有助于ü:)

Answer 2

你也可以这样来做：

<div> 
    <select #dropdown (change)="onDropdownSelect(dropdown)"> 
     <option *ngFor="let client of clients" [value]="client.id">{{ client.name }}</option> 
    </select> 
    </div> 

在组件中：

onDropdownSelect(elem){ 
    console.log(elem.value); 
    }