Угловой 2 Выберите начальный выбор исходного набора компонентов

Question

Я пытаюсь создать компонентную оболочку компонента в Angular 2 с помощью ngModel. Все события срабатывают корректно после изменения выбора, но я не могу установить начальный выбор, когда он отображается.

Это мой компонент:

@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 в родительском компоненте по инициализации, это делает не задайте значение выбранного параметра в пользовательском интерфейсе.

Я также пытался использовать событие ngModelChange, но он не запускает событие изменения.

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

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() ...