угловой rxjs, наблюдаемый внутри ngIf-блока, пропускает первое обновление

Question

У меня есть две наблюдаемые. Первая наблюдаемая используется для оператора ngIf-Block. Вторая наблюдаемая используется внутри блока ngIf и отображает значения из первой наблюдаемой.

Вторая наблюдаемая не получает обновление first из источника внутри блока ngIf. С другой стороны, за пределами ngIf-Block он работает.

Есть ли объяснения этому неожиданному поведению?

Пример: https://stackblitz.com/edit/angular-rxjs-template-update-problem

Answer 1

Это происходит потому, что number$ является субъектом и используется внутри *ngIf, что означает, что он подписывается на sum$ только после создания этого блока шаблона, и это происходит после обновления sum$ с помощью this.number$.next(1).

Итак, вы можете использовать ReplaySubject(1), вместо этого он будет воспроизводить свой последний элемент каждому новому подписчику, поэтому, когда шаблон async pipe внутри *ngIf подписывается на него, он получает последнее значение и воспроизводится по мере вашего обновления. ожидайте.

Ваше обновленное демо: https://stackblitz.com/edit/angular-rxjs-template-update-problem-xb5f3s?file=src/app/app.component.ts