在Angular2中與ngModel綁定時，Polymer紙張下拉菜單無法設置並獲取所選值

Question

我正在嘗試使用聚合物紙張下拉菜單和紙張列表框。 現在我在綁定時遇到問題。

這是下拉列表：

 <select name="singleSelect" [ngModel]="(person | async).department"> 
    <option *ngFor="let x of departments">
       {{x.name}}</option> 
 </select>

我轉換為紙張列表框或紙張下拉菜單

<paper-listbox #department 
        ngDefaultControl name="department" 
        [ngModel]="person.department" 
        label="department" > 
   <paper-item *ngFor="let x of departments"> 
        {{ x.name }} 
   </paper-item> 
</paper-listbox>

departments = [{name: 'HR'}, {name: 'IT'}, {name: 'Admin'}, {name: 'Management'}];

我無法獲取並設置所選值。

請幫忙！

Answer 1

最后我找到了解決方案：

<paper-dropdown-menu label="Department" #dropdown1>-->
<paper-listbox #department2 ngDefaultControl name="department2" class="dropdown-content" [ngModel]="(person | async).department"
    selected="{{(person | async).department}}" attr-for-selected="value">
    <paper-item *ngFor="let x of (departments|async)" [value]="x.label">
        {{ x.label }}
    </paper-item>
</paper-listbox>

Answer 2

這對我有用。 假設您正在嘗試將ngModel設置為一個名為item.setting的變量。

對於我的用法，我使用ngFor動態創建列表框列表。 您需要確保包括import { ViewChildren } from '@angular/core'; 。 函數setItemSetting()會將在列表框中選擇的任何內容設置為item.setting 。

 @ViewChildren('paperListbox') paperListboxes; setItemSetting(index) { return this.paperListboxes.toArray()[index].nativeElement.selected; } 

 <div *ngFor="let item of items; let i = index;"> <paper-dropdown-menu label="Department"> <paper-listbox ngDefaultControl #paperListbox class="dropdown-content" (click)="item.setting = setItemSetting(i);"> <paper-item value="0">Item 1</paper-item> <paper-item value="1">Item 2</paper-item> </paper-listbox> </paper-dropdown-menu> </div> 

如果只需要一個列表框，則可以執行以下操作。 在此示例中，您需要包括import { ViewChild } from '@angular/core'; 。

 @ViewChild('paperListbox') paperListbox; setItemSetting() { return this.paperListbox.nativeElement.selected; } 

  <paper-dropdown-menu label="Department"> <paper-listbox ngDefaultControl #paperListbox class="dropdown-content" (click)="item.setting = setItemSetting();"> <paper-item value="0">Item 1</paper-item> <paper-item value="1">Item 2</paper-item> </paper-listbox> </paper-dropdown-menu>