我正在尝试使用 ngModel 在 Angular 2 中创建一个选择组件包装器。一旦选择更改,所有事件都会正确触发,但我无法在渲染时设置初始选择。
这是我的组件:
@Component({
selector: 'my-dropdown',
inputs: ['selectedItem', 'items', 'label'],
outputs: ['selectedItemChange'],
template: `
<div class="field">
<label>{{label}}</label>
<select class="ui search selection dropdown" [ngModel]="selectedItem" (change)="onChange($event.target.value)">
<option value="" selected>Please Select</option>
<option *ngFor="#item of items" [value]="item.value">{{item.label}}</option>
</select>
</div>`
})
export class MyDropdownComponent {
items: DropdownValue[];
selectedItem: DropdownValue;
selectedItemChange: EventEmitter<any> = new EventEmitter();
private onChange(newValue) {
console.log(newValue);
this.selectedItem = this.items.find(item => item.value == newValue);
console.log(this.selectedItem);
this.selectedItemChange.emit(newValue);
}
}
我在视图中使用它,如下所示:
<my-dropdown [items]="selectItems" [(selectedItem)]="itemToSelect" [label]="'Please Select'"></my-dropdown>
当我设置itemToSelect
value 在 init 时的父组件中,它不会在 UI 中设置选定的选项值。
我也尝试过使用ngModelChange
事件,但它不会触发更改事件。
itemToSelect
最初设置为一个对象,因此 MyDropdownComponent 的 input 属性最初设置为一个对象。但随后在onChange()
字符串值是emit()
ted,然后导致itemToSelect
设置为字符串,因此输入属性变为字符串。不好。
只要坚持使用一个物体,它就会起作用。另外,不需要分配this.selectedItem
in onChange()
,因为所选值将从父级向下传播(通常,您永远不应该在组件中设置输入属性 - 它看起来也很奇怪)。您还可以使用ngModelChange
现在也是:
<select class="ui search selection dropdown" [ngModel]="selectedItem.value"
(ngModelChange)="onChange($event)">
private onChange(newValue) {
console.log('nv',newValue);
selectedItem = this.items.find(item => item.value == newValue);
console.log('si',selectedItem);
this.selectedItemChange.emit(selectedItem);
}
}
Plunker http://plnkr.co/edit/ORBXA59mNeaidQCLa5x2?p=preview
请注意,我没有解决用户选择“请选择”的问题。您需要添加一些逻辑onChange()
来处理那个案子。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)