网站搜索

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,一切就开始正常工作了。

谢谢