2

I am experiencing a problem with async pipe in Angular2, when I use it inside a *ngFor.

Here some code:

This is the template

<li *ngFor="#obj of _filtersPageState | async">
        hello world
</li>

The _filtersPageState variable is declared as:

private _filtersPageState: Observable<any> = new Observable<any>();

and it is initialized by using the select function of @ngrx/store:

this._filtersPageState = store.select('FiltersPageState');
this._filtersPageState.subscribe(v => console.log(v));

The FiltersPageState object inside the store is populated through a http request and if I print the @ngrx/store object in the console log, I can see that the get request is correctly performed.

My problem here is that when the async pipe is placed inside the ngFor, the component fails to load and I get no errors in the Chrome console.

If I write {{_filtersPageState.value | async}} in the html template, the value of the Observable is displayed correctly.

I'm playing with beta 13

Any clue or suggestion? Thank you!

Edit

I noted that if I write {{_filtersPageState| async}} inside the template and in the same time I write an ngFor (even doe this one cycles on a simple array without async pipe, my component breaks (silently)

Edit 2

I want to add another tile to the puzzle.

The following template breaks the Component:

{{_filtersPageState | async}}
<li *ngFor="#obj of simpleArray">
        {{obj}}
</li>

It's like if async and ngFor don't want to be together :(

Edit 3

I found out that no pipe is working inside ngFor:

<h1 *ngFor="#element of filtersPageState|async">{{element}}</h1>
<h1 *ngFor="#element of simpleArray|uppercase">{{element}}</h1>
<h1 *ngFor="#element of simpleArray">{{element|uppercase}}</h1>
<h1 *ngFor="#element of simpleArray|aaaaaaaaa">{{element}}</h1>

in all four cases (also with aaaaaaaaa that is a non existing pipe), my Component fails to load with no error.

Andrea Ialenti
  • 4,380
  • 2
  • 19
  • 22
  • What type does `store.select('FiltersPageState')` return? `ngFor` expects an iterable, so it might just not be one. I've done something very similar in my blog post about this here: http://lukajcb.github.io/blog/angular2/2016/04/02/frp-in-angular-2.html – Luka Jacobowitz Apr 05 '16 at 19:02
  • `store.select()` returns an observable with an array inside. I will look at your post, thank you. Anyway I edited the question adding more details – Andrea Ialenti Apr 05 '16 at 19:33
  • Can you create a Plunker that demonstrates the issue? – Günter Zöchbauer Apr 06 '16 at 10:00

1 Answers1

1

I solved the problem.

I was including in the minified version of Angular 2, once I included angular2.dev.js, everything started working.

Thanks

Andrea Ialenti
  • 4,380
  • 2
  • 19
  • 22
  • This doesn't make sense as an acceptable answer, though. :/ Dev or prod version of angular should not create two separate outcomes. Hmmm... – dudewad Apr 01 '18 at 21:21