Angular 2 Choose the initial selection of a set of components

Question

I am trying to create a wrapper for a select component in Angular 2 using ngModel. All events fire correctly after changing a selection, but I cannot set the initial selection when rendering it.

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 use it in the view as follows:

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

When I set the value itemToSelectin the parent component to init, it does not set the value of the selected parameter in the user interface.

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

Answer 1

itemToSelect , MyDropdownComponent . onChange() emit() ted, , 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

itemToSelect init, .

, ngOnInit() , , ( ngOnInit()), ngAfterViewInit()...