0

I am using @ngrx/store and I am grabbing a slice of the state from the store.

I have a component that wants to display that slice. However, with the {{ obs$ | async}} present in the template, the entire template is not rendered. If I remove the {{ obs$ | async }} then SLICE: is rendered.

Any idea on why this is the case or how to diagnose the issue? The JS console isn't showing me any errors.

@Component({
  selector: 'slice',
  template: `SLICE: {{ obs$ | async }}
})
export class Slice {
  obs$: Observable<any>
  constructor(private store:Store<any>) {
    this.obs$ = this.store.select(s => s.slice);
  }
}
nathasm
  • 2,524
  • 5
  • 24
  • 35
  • I posted my (now deleted) answer without noticing that you've said there aren't any errors in the console - either that's not true, or you *do* have `pipes:[AsyncPipe]` in your component metadata, because otherwise your use of an unimported pipe would definitely throw... – drew moore Apr 21 '16 at 04:34
  • I added the `pipes: [AsyncPipe]` but to no avail. console definitely doesn't show any errors. It may be due to something unrelated and it's manifesting itself in this way. – nathasm Apr 21 '16 at 05:06
  • bingo. Unless `AsyncPipe` is globally available now (would be news to me), that shold be throwing without the import, and if it isn't then something somewhere is very wrong. As a sanity check, try replacing `obs$ | async` with `obs$ | gibberish` in the template and see if that throws – drew moore Apr 21 '16 at 05:12
  • update: I'll be damned, it appears they *have* made `AsyncPipe` globally available now, so disregard the above. In that case, to debug this. subscribe to `obs$` in your component constructor and log each value in the subscription – drew moore Apr 21 '16 at 05:20
  • Can you show a version of your method? – Meligy Apr 21 '16 at 05:29
  • Also, can you log the results of `this.obs$`? And subscribe to it in code and log the output. – Meligy Apr 21 '16 at 05:30
  • In your tamplate code you posted, your missing ` in the end. – Stav Alfi Jul 19 '16 at 08:48

1 Answers1

0

I had a similar problem once. In my case angular did not render the template when the async pipe was used inside a *ngFor block.

I was including the minified version of Angular2.beta13 and I solved by including Angular with the beautified JavaScript.

https://stackoverflow.com/a/36458828/2332293

Community
  • 1
  • 1
Andrea Ialenti
  • 4,380
  • 2
  • 19
  • 22