在模板中訪問下拉列表的選定值

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); 
    }