Angular2 async pipe not working in ngfor

问题

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.

回答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

来源：https://stackoverflow.com/questions/36433672/angular2-async-pipe-not-working-in-ngfor

标签

typescript

angular

ngfor