Angular 2 Select 组件集初始选择

Question

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

这是我的组件：

@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 值时，它不会在 UI.

中设置 selected 选项值

我也尝试过使用 ngModelChange 事件，但它没有触发更改事件。

Answer 1

When I set the itemToSelect value in the parent component on init, it does not set the selected option value in the UI.

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

Answer 2

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);
  }
}

Plunker

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

Angular 2 Select 组件集初始选择

Angular 2 Select Component set initial selection

angularjs

angular2-forms

angular