Angular - Observables combined result multiple calls

Question

EDIT 30-07-2018 01:57 CET: Still looking for a solution to the problem below:

I have the following code:

getBoolean(dataRef1, dataRef2) {
  const myFirstObservable = this.af.object(dataRef1).valueChanges();
  const mySecondObservable = this.af.object(dataRef2).valueChanges();

  return combineLatest(myFirstObservable, mySecondObservable).pipe(map(([data1, data2]) => data1 && data2)))
}

Basically what the code does is: it combines the results of the two observables and then checks each whether it has returned any value. If both observables have a value, return true else return false.

So far so good, everything is working as expected. I then call the method from my View, provide dynamic node references for the observables, and use the boolean to add a conditional element:

<div *ngIf="getBoolean('dataN', 'dataK') | async"> My lovely div content goes here</div>

However, my div does not display on my view at all.

Can someone tell me where I am wrong and help me achieve my desired result?

Answer 1

Most likely the problem is that you're calling a getBoolean('dataN', 'dataK') method in your template. On every change detection Angular invokes getBoolean method that returns a new Observable. The old one is unsubscribed by async and only the new one is active.

At the same time combineLatest operator requires all source Observables to emit at least once which is not very likely to happen because async subscribes/unsubscribes on ever change detection cycle that can happen eve multiple times a second.

So I'd recommend you to store the Observable in a property:

public obs$ = combineLatest(myFirstObservable, mySecondObservable, (data1, data2) => data1 && data2);

Then only use obs$ | async in templates.

Eventually, you can add some logic inside getBoolean that checks whether obs$ exists and if it does you'll just return it as is.

Answer 2

getBoolean() is returning nothing. The return inside the subscribe callback is returning for the subscribe. A way to implement this logic.

getBoolean(dataRef1, dataRef2): Observable<boolean> {
  const myFirstObservable = this.af.object(dataRef1).valueChanges();
  const mySecondObservable = this.af.object(dataRef2).valueChanges();
  return combineLatest(myFirstObservable, mySecondObservable, (data1, data2) => data1 && data2)
}

And the magic: you subscribe in the HTML with async pipe link, which will subscribe for you:

<div *ngIf="getBoolean('dataN', 'dataK') | async"> My lovely div content goes here</div>

Answer 3

First of all, you application stuck on infinite loop because you bind your view with a returned function which does not return nothing. And besides, I dont recommend to bind function from view, but to a variable.
You might try to add a BehaviorSubject which binds the view and the logic to the right value.
I've made a sandbox to just check if it works, and it did.

TL;DR - I just construct two BehaviorSubject to manipulate the value of the third one, which in your case is the desired boolean value. I bind the div to the third BSubject through combineLatest and it works. The point is to keep always a valid variable to bind, which get updated via the subscription of the combineLatest, and I update its value through the BehaviorSubject

k1 = new BehaviorSubject<boolean>(false);
k2 = new BehaviorSubject<boolean>(false);
k3 = new BehaviorSubject<boolean>(false);
k3$: Observable<boolean>;

  constructor() {
    this.k3$ = this.k3.asObservable();
  }

  ngOnInit() {
    combineLatest(this.k1.asObservable(), this.k2.asObservable(), (d1, d2) => {
      return d1 && d2;
    }).subscribe(b => {
      console.log(b);
      this.k3.next(b);
    });
  }

  toggle1 = () => {
    this.k1.next(true);
  };
  toggle2 = () => {
    this.k2.next(true);
  };

and in HTML:

<div *ngIf='k3$ | async'>
Example
</div>

It is works, try to look at the example and project it to your code. Check the CodeSandbox Example

Good luck !