当我在 *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
任何线索或建议?谢谢!
Edit
我注意到,如果我在模板中写入 {{_filtersPageState| async}}
,同时我写了一个 ngFor
(即使这个循环在没有 async
管道的简单数组上,我的组件会中断(静默)
Edit 2
我想在拼图中添加另一个拼贴 .
以下模板打破了组件:
{{_filtersPageState | async}}
<li *ngFor="#obj of simpleArray">
{{obj}}
</li>
这就像是 async
和 ngFor
不想在一起:(
Edit 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
,这是一个非现有的管道),我的组件无法加载,没有错误 .
1 回答
我解决了这个问题 .
我加入了Angular 2的缩小版本,一旦我加入angular2.dev.js,一切都开始工作了 .
谢谢