Блог

Я использую valueChanges для просмотра изменений конкретного элемента управления. Проблема начинается, когда я получаю управляющее значение as @Input и инициализирую его ngOnChanges . Если я смотрю его с помощью async канала, он не работает.

Я полагаю, что это происходит потому ngOnChanges , что происходит раньше ngOnInit , тогда «подписка» на observable выполняется после начальной загрузки. Вопрос в том, как это решить. Могут ли valueChanges действовать как BehaviorSubject? Или у кого-нибудь есть другая идея?

Это мой код:

component.ts:

 @Input() customerId;
customerState$: observable<number>;
myForm:FormGroup;

constructor(){
 this.customerState$= this.myForm.controls.customerId.valueChanges;
}

ngOnChanges(){
     if (changes.customerId) {
        this.myForm.controls.customerId.setValue(changes.customerId.currentValue);
      }
}
  

component.html:

 {{customerState$|async}}
  

В первый раз он ничего не показывает.
Значение отображается только при другом изменении customeId.

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

Поэтому я хотел бы получить ответ на вопрос, который я задал, а не конкретный трюк, который решил бы проблему здесь.

Кажется, я нашел! Решение заключается в операторе rxjs . Я не до конца понял, но это работает! Если кто-нибудь хотел бы прокомментировать это, я хотел бы услышать.

 constructor(){
 this.customerState$= this.myForm.controls.customerId.valueChanges.pipe(
  shareReplay(1)
);
}