Firestore在ngIf条件中剥离异步数据

Question

My app is running Angular 4.4.5 and I'm using firebase via angularfire2 ^5.0.0-rc.3.

My main branch is running off the Firebase Realtime DB, and everything works fine, but as I'm moving to the FireStore DB, I'm having a problem now where ngIf statements don't let my Observables through...

So basically I have an to trigger a loader while content is loading, but the data always comes back null inside those conditionals...

The conditional seems to be coming back true, because plain text will show up inside of it, but the data itself comes back null...

 {{(analyses$ | async) | json}} <!-- This works like a charm --> <div *ngIf="(analyses$ | async)"> {{(analyses$ | async) | json}} <!-- This doesn't work --> HI WORLD <!-- This prints out fine! --> </div> 

What am I missing?

Answer 1

This is a late response to the original question, but I was experiencing the same issue and dealt with it like so:

<app-dumb-component
  *ngIf="(data$ | async) as data"
  [data]="data"></app-dumb-component>

The key is in the (data$ | async) as data and then using that reference wherever you would be handling the observable within the control.