ngFor внутри ngДля возникновения ошибки

1

У меня есть объект 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');
  }

}
Теги:
firebase
ionic-framework
ionic2
firebase-realtime-database

2 ответа

0

Асинхронная труба нуждается в Observable, убедитесь, что ваш ответ Observable, поскольку вы используете firebase, это должен быть FirebaseListObservable.

в вашем случае, я думаю, если вы удалите | async | async во втором ngFor он исправит вашу проблему, так как это массив.

  • 0
    Это из FirebaseListObservable. И я попытался удалить асинхронный, но затем он выдает эту ошибку: «Не удается найти другой поддерживающий объект« [объектный объект] »типа« объект ». NgFor поддерживает только привязку к итерируемым объектам, таким как массивы».
  • 0
    из вашего json он выглядит как объект вместо массива, вы делали db.list ('/ forumSections');
Показать ещё 5 комментариев
0

из вашего комментария, похоже, что ваш первый ngfor должен работать, второй - не работает, потому что он уже не наблюдается, и массив. поэтому вам нужно преобразовать второй в массив, также удалите трубу asyc во втором.

this.af.database.list('/forum/sections/')
.map(sections=>sections
              .map(section=>Object.keys(section.sectionThreads)
                            .map(key=>section.sectionThreads[key])))

Я не тестировал его, и это не машинопись, вам может потребоваться некоторое преобразование

Ещё вопросы

Сообщество Overcoder
Наверх
Меню