Angular 2 Select组件集初始选择 [英] Angular 2 Select Component set initial selection

问题描述

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

I am trying to create a select component wrapper in Angular 2 using ngModel. The events all fire off correctly once the selection is changed but I cannot set the initial selection when it's rendered.

这是我的组件:

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

我正在这样的视图中使用它:

And I'm using it in the view like this:

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

当我在init的父组件中设置itemToSelect值时，它没有在UI中设置选定的选项值.

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

我也尝试过使用ngModelChange事件，但不会触发更改事件.

I have also tried to use the ngModelChange event but it does not fire a change event.

推荐答案

itemToSelect最初设置为对象，因此MyDropdownComponent的输入属性最初设置为对象.但是随后在onChange()中输入一个字符串值emit()，这会导致将itemToSelect设置为一个字符串，因此input属性成为一个字符串.不好.

itemToSelect is initially set to an object, so the input property of MyDropdownComponent is initially set to an object. But then in onChange() a string value is emit()ted, which then causes itemToSelect to be set to a string, and hence the input property becomes a string. Not good.

只需始终使用一个对象，它将起作用.同样，也不需要在onChange()中分配this.selectedItem，因为选定的值将从父级向下传播(通常，您永远不要在组件中设置输入属性，它看起来也很怪异).您现在也可以使用ngModelChange:

Just consistently use an object and it will work. Also, there is no need to assign this.selectedItem in onChange(), since the selected value will propagate back down from the parent (in general, you should never set input properties in the component – it also looks weird). You can also use ngModelChange now too:

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

柱塞

请注意，我没有解决用户选择请选择"的问题.您需要在onChange()中添加一些逻辑以处理这种情况.

Note that I did not solve the issue of the user selecting "Please select". You'll need to add some logic to onChange() to handle that case.

这篇关于Angular 2 Select组件集初始选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！