在 Angular2 中与 ngModel 绑定时，聚合物纸下拉菜单无法设置和获取选定值答案

【问题标题】：Polymer paper-dropdown-menu can't set and get selected value when binding with ngModel in Angular2在 Angular2 中与 ngModel 绑定时，聚合物纸下拉菜单无法设置和获取选定值
【发布时间】：2016-11-11 09:34:00
【问题描述】：

我正在尝试使用聚合物纸张下拉菜单和纸张列表框。现在我遇到了绑定问题。

这里是下拉列表：

 <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'}];

我无法获取和设置所选值。

请帮忙！

【问题讨论】：

标签： angular polymer

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：