typescript - Angular2 异步管道在 ngFor 中不起作用
我在 Angular2 中使用 async 管道时遇到了问题,当我在 *ngFor 中使用它时。
这里有一些代码:
这是模板
<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 的值会正确显示。
我正在玩测试版13
有什么线索或建议吗?谢谢!
编辑
我注意到,如果我在模板中写 {{_filtersPageState| async}},同时又写一个 ngFor(即使这个 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,这是一个不存在的管道),我的组件加载失败且没有错误。
答案#1
我解决了这个问题。
我曾将其包含在 Angular 2 的压缩版本中,一旦我包含了 angular2.dev.js,一切就开始正常工作了。
谢谢