У меня возникла проблема с асинхронной трубой в Angular2, когда я использую ее внутри *ngFor.Angular2 async труба не работает в ngfor
Вот некоторые код:
Это шаблон
<li *ngFor="#obj of _filtersPageState | async">
hello world
</li>
Переменная _filtersPageState объявлена как:
private _filtersPageState: Observable<any> = new Observable<any>();
и инициализируется с помощью функции select от @ngrx/store:
this._filtersPageState = store.select('FiltersPageState');
this._filtersPageState.subscribe(v => console.log(v));
FiltersPageState объекта внутри магазина заполняется через запрос HTTP, и если я распечатать @ngrx/store объект в журнале консоли, я могу видеть, что запрос прибудет выполняется правильно.
Моя проблема заключается в том, что когда труба async находится внутри ngFor, компонент не загружается, и я не получаю ошибок на консоли Chrome.
Если я напишу {{_filtersPageState.value | async}} в шаблоне html, значение Observable будет отображаться правильно.
Я играю с бета 13
Любой ключ или предложение? Спасибо!
Редактировать
Я заметил, что если я пишу {{_filtersPageState| async}} внутри шаблона и в то же время я пишу ngFor (даже лань это один цикл на простом массиве без async трубы, мой компонент ломается (тихо)
Edit 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, который представляет собой несуществующий канал), мой компонент не загружается без ошибок.
Какой тип 'store.select ('FiltersPageState')' return? 'ngFor' ожидает итерации, поэтому он может просто не быть одним. Я сделал что-то очень похожее в своем сообщении в блоге об этом здесь: http://lukajcb.github.io/blog/angular2/2016/04/02/frp-in-angular-2.html –
'store.select () 'возвращает наблюдаемое с массивом внутри. Я буду смотреть на ваш пост, спасибо. В любом случае я отредактировал вопрос, добавив более подробную информацию –
Можете ли вы создать Plunker, который демонстрирует проблему? –