[英]Polymer paper-dropdown-menu can't set and get selected value when binding with ngModel in Angular2
I am trying to use polymer paper-dropdown-menu and paper-listbox. 我正在尝试使用聚合物纸张下拉菜单和纸张列表框。 Now I am having problem in binding. 现在我在绑定时遇到问题。
Here is dropdown list: 这是下拉列表:
<select name="singleSelect" [ngModel]="(person | async).department">
<option *ngFor="let x of departments">
{{x.name}}</option>
</select>
I converted into paper-listbox or paper-dropdown-menu 我转换为纸张列表框或纸张下拉菜单
<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'}];
I couldn't get and set selected value. 我无法获取并设置所选值。
Please help! 请帮忙!
Finally I found the solution: 最后我找到了解决方案:
<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>
This worked for me. 这对我有用。 Say you are trying to set the ngModel to a variable called item.setting
. 假设您正在尝试将ngModel设置为一个名为item.setting
的变量。
For my usage, I am using ngFor
to dynamically create a list of listboxes. 对于我的用法,我使用ngFor
动态创建列表框列表。 You will need to make sure you include import { ViewChildren } from '@angular/core';
您需要确保包括import { ViewChildren } from '@angular/core';
. 。 The function setItemSetting()
will set whatever is selected on the listbox to item.setting
. 函数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>
If you only need one listbox, you can do something like this. 如果只需要一个列表框,则可以执行以下操作。 In this example, you'll need to include import { ViewChild } from '@angular/core';
在此示例中,您需要包括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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.