Polymer paper-dropdown-menuの値変更イベントを購読するには？ （Angular2）

Question

paper-inputコンポーネントには、双方向バインディングを実装するために使用できる「変更済み」イベントがあります。私はpaper-dropdown-menuの同等物を探しています。 paper-dropdown-menu apiはgetterとしての "value"プロパティを提供しますが、イベントとしては提供しません。ここで

は、標準的な紙のドロップダウン・メニューの宣言です：

<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を記載したもの（「鉄の選択」）のようなイベントがありますが、イベントデータはあなたにどの紙のドロップダウンを教えてくれありません-menuの子です。

これまでのところ、データバインディングを達成するための最善の方法は、すべてのペーパーリストボックスの「アイロンセレクト」イベントをリッスンし、毎回すべてのドロップダウンの値を取得することです。 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">