У меня есть объект jbbbbbbbbbase, который состоит из разделов. Внутри секций также есть потоки секций. Я пытаюсь выполнить итерацию разделов, а затем потоков. Проблема в том, что я получаю эту ошибку
InvalidPipeArgument: '[object Object]' для канала 'AsyncPipe'
когда я добавляю второй * ngFor для потоков
Это мой HTML
<div *ngFor="let section of forumSections | async">
<div>Header title: {{section.sectionTitle}}</div>
<div *ngFor="let thread of section.sectionThreads | async">
<div>Thread title: {{thread.title}}</div>
</div>
И мой объект JSON из базы данных firebase
"forum" : {
"sections" : {
"Y6ML8AA9V5RB2sKFmKndnHFqRw23" : {
"sectionThreads" : {
"-zqehRPSbalaburpm2dW" : {
"description" : "Sup ladies",
"title" : "elo mm9"
},
"-zqehRPSbalajYGfm2dW" : {
"description" : "Sup boi",
"title" : "elo m8"
}
},
"sectionTitle" : "Official"
}
}
}
Я что-то пропустил? Любая помощь приветствуется, спасибо.
Обновить:
forum.ts
import {Component, OnInit} from '@angular/core';
import {IonicPage} from 'ionic-angular';
import {FirebaseListObservable} from "angularfire2";
import {ForumServiceProvider} from "../../providers/forum-service/forum-service";
@IonicPage()
@Component({
selector: 'page-forum',
templateUrl: 'forum.html',
})
export class ForumPage implements OnInit {
forumSections: FirebaseListObservable<any>;
constructor(public forumService: ForumServiceProvider) {
}
ngOnInit() {
this.loadForumData();
}
loadForumData() {
this.forumSections = this.forumService.getInitialSections();
}
}
Форумные игры
import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {AngularFire, FirebaseListObservable} from "angularfire2";
@Injectable()
export class ForumServiceProvider {
constructor(public af: AngularFire) {
}
/**
* Get the forums front facing sections
* @returns {FirebaseListObservable<any>}
*/
getInitialSections(): FirebaseListObservable<any> {
return this.af.database.list('/forum/sections');
}
}
Асинхронная труба нуждается в Observable, убедитесь, что ваш ответ Observable, поскольку вы используете firebase, это должен быть FirebaseListObservable.
в вашем случае, я думаю, если вы удалите | async
| async
во втором ngFor он исправит вашу проблему, так как это массив.
из вашего комментария, похоже, что ваш первый ngfor должен работать, второй - не работает, потому что он уже не наблюдается, и массив. поэтому вам нужно преобразовать второй в массив, также удалите трубу asyc во втором.
this.af.database.list('/forum/sections/')
.map(sections=>sections
.map(section=>Object.keys(section.sectionThreads)
.map(key=>section.sectionThreads[key])))
Я не тестировал его, и это не машинопись, вам может потребоваться некоторое преобразование