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