Question

我正在尝试使用ngModel在Angular 2中创建一个选择组件包装器。选择更改后，事件都会正确触发，但我无法在渲染时设置初始选择。

这是我的组成部分：

<my-dropdown [items]="selectItems" [(selectedItem)]="itemToSelect" [label]="'Please Select'"></my-dropdown>

我在这样的视图中使用它：

itemToSelect

当我在init上的父组件中设置ngModelChange值时，它不会在UI中设置所选的选项值。

我还尝试使用def show_rc_menu(self,event): self.menu.post(event.x_root, event.y_root) def creat_right_click_menu(self): self.menu=Menu() self.menu.add_command(label='hereiam1',command=self.hello) self.menu.add_command(label='hereiam2',command=self.hello) self.menu.add_command(label='hereiam3',command=self.hello) ... self.menu.add_command(label='hereiam100',command=self.hello) def resize(self,e): print e事件，但它不会触发更改事件。

Answer 1

itemToSelect最初设置为一个对象，因此MyDropdownComponent的输入属性最初设置为一个对象。但是在onChange()中，字符串值为emit()，然后将itemToSelect设置为字符串，因此输入属性变为字符串。不好。

只需始终使用一个对象即可。此外，无需在this.selectedItem中分配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

请注意，我没有解决用户选择“请选择”的问题。您需要向onChange()添加一些逻辑来处理这种情况。

Answer 2

当我在init上的父组件中设置itemToSelect值时，它不会在UI中设置所选的选项值。

假设您在父级中使用ngOnInit()，则应在稍后调用的lifecycle hooks之一中设置值（因为ngOnInit()中尚不存在子级），请尝试ngAfterViewInit() ...

角度2选择组件集初始选择

2 个答案: