首页 文章

Angular2异步管道在ngfor中不起作用

提问于
浏览
2

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

这里有一些代码:

这是模板

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

_filtersPageState 变量声明为:

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

并使用 @ngrx/storeselect 函数进行初始化:

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>

这就像是 asyncngFor 不想在一起:(

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 回答

  • 1

    我解决了这个问题 .

    我加入了Angular 2的缩小版本,一旦我加入angular2.dev.js,一切都开始工作了 .

    谢谢

相关问题