Search code examples
rxjsrxjs5angular2-observablesbehaviorsubject

Compare most recent values from multiple BehaviorSubjects


Say I have this:

  isMatchedCountLessThanTotalCountMessage(){
       // I want to implement this
       // "returns" a string asynchronously
  }

  getMatchedEventsCount() {
    return this.dcs.matchCount.asObservable();
  }

  getTotalEventsCount() {
    return this.dcs.totalCount.asObservable();
  }

matchedCount and totalCount are like so:

  public matchCount = new BehaviorSubject<number>(0);
  public totalCount = new BehaviorSubject<number>(0);

these Observables fire integers as values change. Anytime a value is fired from either one, I want to compare the two most recent values from both, how do I do that?

What I want to do is return a boolean from the method

so I can display in the HTML:

 <div>{{(isMatchedCountLessThanTotalCountMessage() | async)}}</div>

I think Observable.zip might do the trick:

isMatchedCountLessThanTotalCountMessage(){
    return Observable.zip(
      this.getMatchedEventsCount(),
      this.getTotalEventsCount()
    )
    .subscribe(function(v){
      const intA = v[0];
      const intB = v[1];

        if(intA > intB)
         // but I don't know how to send a message the HTML from here
    });
  }

Solution

  • You can easily use .map() function to transform the data you want:

    isMatchedCountLessThanTotalCountMessage() {
        return Observable.combineLatest(
            this.getMatchedEventsCount(),
            this.getTotalEventsCount(),
        )
            .map(([intA, intB]) => {
                return intA > intB ? '(results ARE filtered)' : '(results are not filtered)'
            })
    }