Angular, 2 subjects, combineLatest not working

Question

  $query: Subject<string> = new Subject();
  $order: Subject<string> = new Subject();

  constructor() {
    combineLatest([this.$query, this.$order]).pipe(
      debounceTime(300),
      startWith([null, 'Oldest'])
    ).subscribe(([query, order]) => {
      console.log('query', query);
      console.log('order', order);
    });  
  }

Logs showed only once and after I try to call $query.next('sthg') , it's not working.

Does anybody have any idea why? I want to log the values if the $query or the $order gets a new value. Is combine latest not working with subjects?

Answer 1

All source Observables need to emit at least once so you could use this instead:

combineLatest([
  this.$query.pipe(startWith(null)),
  this.$order.pipe(startWith("Oldest")),
]).pipe(
  debounceTime(300),
)
.subscribe(...);

This way you'll get the first emision that you expect and then it should emit on every change.

Answer 2

In order for this to work, both observables must emit at least one value, according to the documentation . You can try something like this:

  combineLatest([this.$query, this.$order.pipe(startWith("Oldest")]).pipe(
    debounceTime(300),
  ).subscribe(([query, order]) => {
    console.log('query', query);
    console.log('order', order);
  });

Then when you will call $query.next('sthg') you should see your console logs.

Answer 3

Quated from combineLatest (learnrxjs.io)

Be aware that combineLatest will not emit an initial value until each observable emits at least one value . This is the same behavior as withLatestFrom and can be a gotcha as there will be no output and no error but one (or more) of your inner observables is likely not functioning as intended, or a subscription is late.

Personally i use BehaviorSubject as sources and add filter pipe to escape unwanted combinaiton:

combineLatest([this.obs1$, this.obs2$, this.obs3$])
    .pipe(
      filter((result) => {
        let valueObs1 = result[0];
        let valueObs2 = result[1];
        let valueObs3 = result[2];

        if (logic tgo escape) 
             return false;

        return true;
      })
    )
    .subscribe(
      (result) => console.log(result),
      (error) => console.log(error)
    );