Angular 4 - 在選擇列表中使用選項值對象

Question

我知道類似的問題已經被問到，但我沒有找到一個好答案。我想創建一個角度形式的選擇列表，其中每個選項的值是一個對象。另外，我不想使用2種方式的數據綁定。例如如果我的組件有這些領域：

 

    lUsers: any[] = [ 
     { Name: 'Billy Williams', Gender: 'male' }, 
     { Name: 'Sally Ride', Gender: 'female'} 
     ]; 
    curUser: any; 

我想我的HTML模板包含此：

 

    <select #selectElem (change)="setNewUser(selectElem.value)"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

有了這個代碼，但是，我的setNewUser（）函數接收所選擇的用戶名的內容領域。爲什麼選擇這個特定的領域，我不知道。我期望的是，它會收到所選選項的「值」，我特別將其設置爲用戶對象。

請注意，我在選項中使用了ngValue而不是value。這是由SO的其他人的建議。如果我使用value來代替，那麼會發生的是對象被轉換爲字符串'[Object object]'，這是setNewUser（）所接收的，這是無用的。

僅供參考，我正在使用角度4.0.0與@ angular/cli 1.1.2在Windows 10上工作。這裏是setNewUser（）方法：

 

    setNewUser(user: User): void { 

    console.log(user); 
    this.curUser = user; 
    } // setNewUser() 

我準確地確定被傳遞正是它我的兩個記錄它，而且還包括這個模板上：<pre>{{curUser}}</pre>

Answer 1

由於valueoption標籤的屬性不能存儲整個對象，我們將在lUsers數組中創建一個新屬性id以跟蹤所選項目。

HTML：

<select #selectElem (change)="setNewUser(selectElem.value)"> 
    <option *ngFor="let user of lUsers" [value]="user.id"> 
     {{user.Name}} 
    </option> 
</select> 

這將通過獨特的id我們setNewUser上變化的功能。

在你component.ts：

... 

lUsers: any[] = [ 
    { id: 1, Name: 'Billy Williams', Gender: 'male' }, 
    { id: 2, Name: 'Sally Ride', Gender: 'female'} 
]; 
curUser: any = this.lUsers[0]; // first will be selected by default by browser 

... 

setNewUser(id: any): void { 
    console.log(id); 
    // Match the selected ID with the ID's in array 
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id)); 
    console.log(this.curUser); 
} 

這裏是上面代碼的plnkr演示。打開您的開發人員工具以查看控制檯日誌。

Answer 2

您可以在元素上使用[ngValue]而不是[value]。 它適合我。

我發現，這裏的信息：https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

Answer 3

我目前使用[ngValue]和它存儲的對象就好了。

的解釋，爲什麼你使用(change)代替(ngModelChange)可以this question

因此可以發現，因爲你已經使用[ngValue]遇到的問題，你可能想要做這樣的事情，在這裏您將只使用一種方式，爲了結合才能夠使用ngModelChange指令：

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

和你的TS文件將捕獲的事件，並接收用戶對象，而不需要通過ID來跟蹤它，基本上是重複使用舊的方法，將是很好的足夠：

setNewUser(user: User): void { 
    console.log(user); 
    this.curUser = user; 
    }