Почему этот оператор не работает?

Question

Я озадачен этим оператором rxjs tap (), который никогда не запускается в этом простом угловом компоненте, в то время как значение Subject действительно обновляется на экране. Я также попытался использовать BehaviorSubject вместо этого с теми же результатами. Что я тут не так делаю?

import { Component } from '@angular/core';

import { Subject, BehaviorSubject } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: '{{ selectedUserId | async }}',
})
export class AppComponent { 

  selectedUserId = new Subject<number>();
  // selectedUserId = new BehaviorSubject<number>(0);

  ngOnInit() {
    this.selectedUserId
      .pipe(
        tap(id => console.log(id)) // why this is not logging to console?
      );
    setTimeout(() => this.selectedUserId.next(1), 1000);
    //this.selectedUserId.next(1);
  }

}

Answer 1

Это потому, что в Observable асинхронный канал, на который подписывается канал, не имеет ответвления.

В частности, оператор канала в

this.selectedUserId
  .pipe(
    tap(id => console.log(id)) // why this is not logging to console?
  );

не изменяет Observable, сохраненный вthis.selectedUserId.Скорее, он создает и возвращает новый Observable с tap, но, поскольку вы никогда не subscribe возвращенному наблюдаемому, tap никогда не вызывается ...

Answer 2

эта строка 100 this.selectedUserId.pipe(tap(id => console.log(id)) ); возвращает новую наблюдаемую базу selectedUserId, поэтому вам нужно подписаться на новую наблюдаемую точку, чтобы получить значения и.

Оператор вкладки будет работать на новой наблюдаемой и не влияет на базовую наблюдаемую (selectedUserId)

  const obs =  this.selectedUserId
      .pipe(
        tap(id => console.log(id)) 
      );

   obs.subscribe()

демо ??

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

  private selectedUserId = new Subject<number>();
  public userId$ : Observable<number>;

  ngOnInit() {
   this.userId$ =  this.selectedUserId
      .pipe(
        tap(id => console.log(id)) ,
      );

    setTimeout(() => this.selectedUserId.next(1), 1000);
    setTimeout(() => this.selectedUserId.next(2), 2500);
    setTimeout(() => this.selectedUserId.next(3), 5000);
  }

шаблон

{{ userId$ | async }}

демо ??