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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: