將選定選項傳遞給其他元素上的事件處理函數

我有一個select元素和一個Angular 2組件中的按鈕。我在按鈕上有一個點擊處理程序，當我點擊按鈕時，我想要訪問select元素的值。我曾嘗試以下：將選定選項傳遞給其他元素上的事件處理函數

import { Component } from 'angular2/core'; 
import { Department } from "../classes/department"; 

@Component({ 
    selector: 'my-component', 
    template: ` 
     <select #s> 
      <option *ngFor="#department of departments" [value]="department">{{ department.id }}</option> 
     </select> 

     <button (click)="removeDepartment(s.value)">Remove</button> 
    ` 
}) 
export class MyComponent { 
    // ... 

    removeDepartment(department: Department) : void { 
     console.log(department); 
     console.log(typeof department); 
    } 
}

基本上我有Department對象的數組，並且當我點擊按鈕，我試圖通過結合到所選擇的選項的方法removeDepartment對象。我不知道我是否可以使用s變量，因爲我正在嘗試。結果是字符串[object Object]被傳遞給方法而不是對象。

我知道我可以通過select元素上的change事件完成我想要的任務，但我不想將當前選定的值存儲在我的組件中，除非必須。我也可以通過使用@ViewChild來解決這個問題，但如果可能的話，我更喜歡做類似於我想要做的事情。

是否有可能通過使用變量傳遞當前選定的值，或者我必須在組件中保留一個變量並使用change事件更新它？

我使用角2公測15

來源

2016-04-17 Andy0708

如果你想使用對象的值，你需要使用ngValue而不是value。 value只支持string和stringifies分配給它的任何值：

<option *ngFor="let department of departments" [ngValue]="department">{{ department.id }}</option>

這在beta.14

來源

2016-04-17 14:11:17

實際上，我是試圖讓這工作，因爲我讀了一些關於它補充說。但是，當我嘗試使用'ngValue'時，出現錯誤，指出無法找到該目錄。我嘗試將它添加到'directives'鍵並導入它，但是我的IDE似乎並不認爲它可用於'angular2/common'，例如'NgClass'。看起來好像它不僅僅是我的IDE，因爲我也會遇到運行時錯誤。我在這裏錯過了什麼嗎？也許它位於別的地方？謝謝！ :-) – Andy0708

https://plnkr.co/edit/DgEkNh?p=preview –

謝謝，事實證明，我在我的構建中犯了一個錯誤。但是，無論是在Plunker還是在我的代碼中，傳遞的值都是一個字符串，而不是我所希望的對象。任何想法爲什麼？ – Andy0708

將選定選項傳遞給其他元素上的事件處理函數

回答

相關問題