如何在沒有雙向數據綁定的情況下從Angular2中的「選擇」中選擇對象

Question

我試圖用對象列表創建下拉列表。由於包含其他選項的下拉列表，它不能雙向綁定到數組。在選擇時，我想將對象傳遞給組件，但目前我只能傳遞顯示值。

這裏是我的模板：

<select (change)="doSomething($event.target.value)"> 
     <option disabled selected>Please select...</option> 
     <option *ngFor="let item of items" [ngValue]="item">{{ item.description }}</option> 
     <option [ngValue]="">None of the above</option> 
    </select> 

和功能部件：

doSomething(item) { 
     console.log(item); 
    } 

這將導致 「項目介紹」，而不是{ 'ID'：4，....我怎麼能改變這個？

Answer 1

<select [(ngModel)]="selectedValue" (change)="doSomething()"> 
    <option disabled selected>Please select...</option> 
    <option *ngFor="let item of items" [ngValue]="item">{{ item.description }}</option> 
    <option [ngValue]="">None of the above</option> 
</select> 

selectedValue: any; 
doSomething() { 
    console.log(this.selectedValue); 
} 

你可以嘗試這個想法。

Answer 2

<select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'> 
     <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option> 
     </select> 
     <button (click)="getValueFromSelect()">Get value</button> 

Answer 3

的[(ngModel)]屬性是[ngModel]和(ngModelChange)快捷方式。

例

[(ngModel)]="foo" 

等效於

[ngModel]="foo" (ngModelChange)="foo = $event" 

注意$event是從器件發射的變化。

你的情況

所以，要在(ngModelChange)

component.html做點什麼

(ngModelChange)="doSomething($event)" 

component.ts

doSomething(value) { 

    console.log(value) 

    // If you want to manually "re-bind" the model, 
    // you can re-assign it, this will make sure the ui 
    // is updated with the new value 
    this.foo = value 
}