Angular 如何订阅聚合纸下拉菜单值更改事件？（2）

该组件有一个已更改的事件，可用于实现双向绑定。我正在为你找一个等价物。纸张下拉菜单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>

具有类似iron select所述的事件，但事件数据不会告诉您它是哪个纸张下拉菜单的子菜单

到目前为止，我能够完成数据绑定的最好方法是监听所有纸质listbox iron select事件，然后每次捕获所有下拉列表的值

在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值调用。这是因为事件在传播到父级纸张下拉菜单之前触发。

可绑定的更改事件会很好，但这些可能是对当前方法的适度改进：

您可以直接从listbox事件中获取值，而不是超时。如果需要，它还支持multi-select：

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