Angular2异步管道在ngfor中不起作用 [英] Angular2 async pipe not working in ngfor

问题描述

在*ngFor中使用Angular2时，我遇到了异步管道的问题.

下面是一些代码:

这是模板

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

_filtersPageState变量声明为:

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

，并使用@ngrx/store的select函数将其初始化:

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

商店中的FiltersPageState对象是通过http请求填充的，如果我在控制台日志中打印@ngrx/store对象，则可以看到正确执行了get请求.

我的问题是，当async管道放置在ngFor内时，该组件无法加载，并且在Chrome控制台中没有出现任何错误.

如果我在html模板中写{{_filtersPageState.value | async}}，则Observable的值会正确显示.

我正在玩beta 13

有任何线索或建议吗?谢谢！

修改

我注意到，如果我在模板中编写{{_filtersPageState| async}}并同时编写ngFor(即使在没有async管道的简单数组上执行此循环，我的组件也会(无声地)损坏

编辑2

我想在拼图中添加另一个图块.

以下模板破坏了组件:

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

就像async和ngFor不想在一起时一样:(

编辑3

我发现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>

在所有四种情况下(也使用不存在的aaaaaaaaa管道)，我的组件都不会错误地加载.

解决方案

我解决了这个问题.

我将其包含在Angular 2的精简版中，一旦包含了angular2.dev.js，一切便开始正常工作.

谢谢

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.

解决方案

I solved the problem.

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

Thanks

这篇关于Angular2异步管道在ngfor中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！