我正在尝试使用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>
当我在init上的父组件中设置itemToSelect值时,它不会在UI中设置所选的选项值.
我还尝试使用ngModelChange事件,但它不会触发更改事件.
解决方法
itemToSelect最初设置为一个对象,因此MyDropdownComponent的输入属性最初设置为一个对象.但是在onChange()中,一个字符串值是emit()ted,然后将itemToSelect设置为一个字符串,因此输入属性变为一个字符串.不好.
只是始终如一地使用一个对象,它将工作.此外,不需要在onChange()中分配this.selectedItem,因为所选的值将从父级传播回来(通常,您不应该在组件中设置输入属性 – 它看起来也很奇怪).您现在也可以使用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);
}
}
