Установите начальное значение для выбора в пользовательском компоненте в Angular 4

Question

Как вы можете видеть в этом plunkr ( https://plnkr.co/edit/3EDk5xxSLRolv2t9br84?p=preview), у меня есть два выбора: один в основном компоненте, ведущий себя как обычно, и один в пользовательском компоненте, наследующий настройки ngModel.

Следующий код связывает innerNgModel с компонентом ngModel.

ngAfterViewInit() {
  //First set the valueAccessor of the outerNgModel
  this.ngModel.valueAccessor = this.innerNgModel.valueAccessor;

  //Set the innerNgModel to the outerNgModel
  //This will copy all properties like validators, change-events etc.
  this.innerNgModel = this.ngModel;
}

Это работает, так как свойство name обновляется обоими селектами.

Однако при первой загрузке второй выбор не имеет выбора.

Я думаю, что я что-то упустил, способ инициализировать innerNgModel с начальным значением.

Answer 1

Это странная ситуация, когда вы делаете что-то подобное, но я верю, что для того, чтобы это заработало, им нужно реализовать еще один хук жизненного цикла. AfterModelSet или что-то в этом роде:)

В любом случае, вы можете решить это с помощью простого setTimeout и setValue:

ngAfterViewInit() {
   this.ngModel.valueAccessor = this.innerNgModel.valueAccessor;
   this.innerNgModel = this.ngModel;
   setTimeout(() => {
      this.innerNgModel.control.setValue(this.ngModel.model);
   })
}

plunkr