Angular 2 Select Component 设置初始选择 [英] Angular 2 Select Component set initial selection

问题描述

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

这是我的组件:

@Component({选择器:'我的下拉菜单'，输入:['selectedItem', 'items', 'label'],输出:['selectedItemChange']，模板:`<div class="field"><label>{{label}}</label><select class="ui search selection dropdown" [ngModel]="selectedItem" (change)="onChange($event.target.value)"><option value="" selected>请选择</option><option *ngFor="#item of items" [value]="item.value">{{item.label}}</option></选择>

`})导出类 MyDropdownComponent {项目:DropdownValue[];selectedItem:下拉值；selectedItemChange: EventEmitter= new EventEmitter();私人 onChange(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]="'请选择'"></my-dropdown>

当我在初始化时在父组件中设置 itemToSelect 值时，它不会在 UI 中设置选定的选项值.

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

解决方案

itemToSelect 初始设置为对象，因此 MyDropdownComponent 的输入属性初始设置为对象.但是在 onChange() 中，一个字符串值是 emit()ted，然后导致 itemToSelect 被设置为一个字符串，因此input 属性变成一个字符串.不好.

只要始终如一地使用一个对象，它就会起作用.此外，无需在 onChange() 中分配 this.selectedItem，因为所选值将从父级向下传播(通常，您不应该设置输入组件中的属性 - 它看起来也很奇怪).您现在也可以使用 ngModelChange:

私人 onChange(newValue) {console.log('nv',newValue);selectedItem = this.items.find(item => item.value == newValue);console.log('si',selectedItem);this.selectedItemChange.emit(selectedItem);}}
Plunker
请注意，我没有解决用户选择请选择"的问题.您需要向 onChange() 添加一些逻辑来处理这种情况.
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.

This is my component:
@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>
When I set the itemToSelect value in the parent component on init, it does not set the selected option value in the UI.

I have also tried to use the ngModelChange event but it does not fire a change event.
解决方案
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.

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

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 Component 设置初始选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆