3

I created a new angular6 project with angularfire2 and rxjs 6. I am debugging the loading bar to be shown while loading observables.

my ts code:

import { combineLatest, Observable } from 'rxjs';

groups: Observable<Array<any>>;
singles: Observable<Array<any>>;
combined: Observable<Object>;

public loadall()
{
    this.groups= this.db.collection('groups').valueChanges();
    this.singles= this.db.collection('singles').valueChanges();
    this.combined = combineLatest(this.groups, this.singles);
    //took this from https://auth0.com/blog/whats-new-in-rxjs-6/
}

my html template:

<ng-template #loading>
  <div class="loader"></div>
</ng-template>

<div *ngIf="combined | async; else loading"> //this div
  <div *ngFor="let group of groups | async">
    {{ group.name }}
    <div *ngFor="let single of singles | async">
      {{ single.name }}
    </div>
  </div>
</div>

Currently without the //this div bracket, the output will be displayed. However, with the //this div bracket, output does not get displayed.

With the previous version of rxjs, I used:

this.combined = Observable.combineLatest(query$);

And this works. So I figure my implementation of the combineLatest operator is wrong. Appreciate help to further debug this.

BOOnZ
  • 828
  • 2
  • 15
  • 35
  • 1
    Any errors in the console? Have you tried to declare `combined` as `Observable`? The code looks like it should work! – R. Richards Jul 21 '18 at 18:59
  • I tried declaring as Observable, but the information still does not show up. There's no error in the console. I tried to console.log the subscribe value. It indeed shows there some output but unfortunately the html is not showing it with the *ngIf=combined |async" div – BOOnZ Jul 21 '18 at 19:03
  • What was `query$` in your old code `Observable.combineLatest(query$);` - I don't see that in new code – Wand Maker Jul 21 '18 at 19:12
  • Yea, query$ is just like this.groups = this.db.....valueChanges(). I put it there differentiate the old usage and the new usage syntax. – BOOnZ Jul 21 '18 at 19:27
  • 1
    Your code looks alright. As per documentation `Be aware that combineLatest will not emit an initial value until each observable emits at least one value. ` - Can you confirm that both `this.groups` and `this.singles` are emitting values? – Wand Maker Jul 21 '18 at 19:34
  • Yep, I have tested that both valueChanges() has subscribed output in console. I just cannot figure out why passing the two observables to the combineLatest function does not work. – BOOnZ Jul 21 '18 at 19:38
  • forkJoin does not work too. However I have a new observation: If i use combineLatest, the loading bar actually disappears but the output does not gets displayed. Using forkJoin, the loading bar does not disappears which means that this.combined does not gets emitted values – BOOnZ Jul 21 '18 at 19:47
  • I tested `combineLatest` - it seems to work just fine. https://stackblitz.com/edit/angular-dj8vy4 – Wand Maker Jul 21 '18 at 20:01
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176492/discussion-between-user776914-and-wand-maker). – BOOnZ Jul 21 '18 at 20:23

0 Answers0