如何订阅Polymer paper-dropdown-menu value change事件？ （Angular2）

Question

paper-input组件有一个＆＃34;已更改＆＃34;您可以用来实现双向绑定的事件。我正在寻找paper-dropdown-menu的等价物。纸张下拉菜单api提供＆＃34;值＆＃34;属性作为吸气剂，但不是事件。

以下是标准的纸张下拉菜单声明：

<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有一个类似于所描述的事件（＆＃34;铁选择＆＃34;），但事件数据不会告诉您它是哪个纸张下拉菜单。

到目前为止，我能够完成数据绑定的最佳方式是通过收听所有纸张列表框＆＃34;铁选择＆＃34;事件，然后每次都抓住所有下拉列表的值。

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

这似乎不是一种非常优雅的方式，特别是因为我必须在超时中包含getter（＆＃34; value＆＃34;）调用。这是因为事件在传播到父级之前触发（纸张下拉菜单）。

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">