如何訂閱Polymer paper-dropdown-menu value change event？ （Angular2）

Question

paper-input組件有一個「更改」事件，您可以使用它來實現雙向綁定。我正在尋找paper-dropdown-menu的等價物。 paper-dropdown-menu API提供了「value」屬性作爲getter，但不是一個事件。

下面是標準的紙張下拉菜單聲明：

<paper-dropdown-menu label="Your favourite pastry"> 
    <paper-listbox class="dropdown-content"> 
    <paper-item>Croissant</paper-item> 
    <paper-item>Donut</paper-item> 
    <paper-item>Financier</paper-item> 
    <paper-item>Madeleine</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 

paper-listbox有類似描述（「鐵選」）的一個事件，但事件數據不告訴你哪些紙張下拉 - 這是它的孩子。

到目前爲止，我已經能夠完成數據綁定的最佳方式是通過監聽所有紙張列表框「鐵選擇」事件，然後每次抓取所有下拉列表的值。

在Angular2：

/* template */ 

<paper-dropdown-menu #dropdown1 label="Your favourite pastry"> 
    <paper-listbox (iron-select)="onSelectDropdown($event)" class="dropdown-content"> 
    <paper-item>Croissant</paper-item> 
    <paper-item>Donut</paper-item> 
    <paper-item>Financier</paper-item> 
    <paper-item>Madeleine</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 

//and another 2... 

/* class */ 

@ViewChild('dropdown1') dropdown1:any; 
@ViewChild('dropdown2') dropdown2:any; 
@ViewChild('dropdown3') dropdown3:any; 

onSelectDropdown(event:any){ 
    setTimeout(()=>{ 
    this.data = { 
    thing1: this.dropdown1.nativeElement.value; 
    thing2: this.dropdown2.nativeElement.value; 
    thing3: this.dropdown3.nativeElement.value; 
    } 
    }, 0); 
} 

這似乎並不像一個非常優雅的方式做到這一點，尤其是因爲我有包裝的吸氣劑（「值」）調用的超時。這是因爲事件在傳播到父級之前觸發事件（下拉菜單）。

Answer 1

可綁定改變事件將是很好的，但這些可能是對現行辦法適度改善：

而不是超時，你可以直接從列表框中事件中獲得的價值（這也支持多選，如果這是可取的）：

onSelectDropdown(event:any){ 
    console.log("selected item(s)", event.target.selectedItems); 
} 

要確定哪些列出它來自你可以在下拉菜單中提供不同的處理程序，或手工指定它的處理程序：

<paper-dropdown-menu #dropdown1 label="Your favourite pastry"> 
    <paper-listbox (iron-select)="onSelectDropdown($event,'dropdown1')" class="dropdown-content"> 
... 
<paper-dropdown-menu #dropdown2 label="Your favourite cheese"> 
    <paper-listbox (iron-select)="onSelectDropdown($event,'dropdown2')" class="dropdown-content">