简体   繁体   中英

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}} {{_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}} {{_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.

I solved the problem.

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

Thanks

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM