小编Enl*_*dZA的帖子

我正在尝试使用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>

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

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

我正在尝试为输入创建一个包装器组件,例如复选框,但我无法更改父(inputValue)变量,即使它被设置为ngModel.

这是我的组件定义:

@Component({
selector: 'my-checkbox',
inputs: ['inputValue', 'label'],    
template: `
    <div class="ui checkbox">
      <input type="checkbox" name="example" [(ngModel)]="inputValue" (change)="onChange($event)">
      <label>{{label}}</label>
    </div>`
})

export class CheckboxComponent {    

inputValue: boolean;

onChange(event) {
    this.inputValue = event.currentTarget.checked;
    console.log(this.inputValue);
}}

我在父视图中使用它:

<my-checkbox [inputValue]="valueToUpdate" [label]="'Test Label'"></my-checkbox>

控制台确实正确记录,我可以看到内部(inputValue)正在更新但不是外部'valueToUpdate'(ngModel双向绑定未正确更新).