使用 *ngFor 绑定从 Firebase 导入的数据时遇到问题

Question

我不知道如何让我的数据显示在我的模板中。我在我的组件的 ngOnInit 中添加了一个 console.log() 以确保该服务正在检索和传送数据并且我确实得到了结果。

在控制台的 elements 部分，我在应该填充数据的地方看到了这个。

<!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object]"
}-->

当我在绑定中更改名称以尝试查看是否需要以不同方式对它们进行排序时，我开始收到未定义的错误。然而，回到我现在的状态，除了不显示数据外，一切正常。

这是我的应用组件

import { Component, OnInit }                    from '@angular/core';

import { AngularFire, FirebaseListObservable }  from 'angularfire2';

import { FirebaseService }                      from './services/database.service';



export interface answers {
    $key: string;
    id: string;
    answer: string;
}

export interface questions {
    $key: string;
    question: string;
    id: string;
    name: string;
    answers: answers[];
}

export interface bus_image {
    $key: string;
    questions: questions[];
}

@Component({
    moduleId:       module.id,
    selector:       'app-root',
    templateUrl:    './app.component.html',
    styleUrls:      [ './app.component.css' ],
    providers:      [ FirebaseService ]
})



export class AppComponent implements OnInit {

    title = 'app works!';
    businessImage: bus_image;

    constructor(private _firebaseService:FirebaseService){}

    ngOnInit() {
        this._firebaseService.getBusImg().subscribe(businessImage => {
            this.businessImage = businessImage;
            console.log(businessImage);
        });
    }
}

这是模板

<h1>{{title}}</h1>

<div *ngFor="let questions of businessImage">
    <h1>{{questions.question}}</h1>
    <ul>
        <li *ngFor="let answers of questions">
            {{answers.answer}}
        </li>
    </ul>
</div>

其他任何时候都是这样。我还用 {{question}} 和 {{questions.question}} 尝试了 let question of businessImage.questions。无论哪种方式，我都会在 questions.

上收到未定义的错误

我通过接口向它们添加 1 只是为了看看它是否破坏了数据以确保那些正在做那里的工作并且事情不仅仅是绕过它进入 OnInit。我弄乱了 businessImage: bus_image 部分，看看它是否弄乱了 console.log() 以确保它正在接收要部署到模板中的数据。

我唯一能想到的可能是 firebase 自动将键添加到我最初编码的 questions[] 和 answers[] 数组的方式。任何人都可以阐明这一点吗？

UPDATE

这就是我 class 中现在的内容。

export class AppComponent {

    title = 'app works!';
    businessImage$: Observable<bus_image>;

    constructor(private _firebaseService:FirebaseService){
        this.businessImage$ = this._firebaseService.getBusImg();
        console-log(this.businessImage$);
    }

    //ngOnInit() {
    //  this._firebaseService.getBusImg().subscribe(businessImage => {
    //      this.businessImage$ = businessImage;
    //      console.log(businessImage);
    //  });
    //}
}

这是模板

<h1>{{title}}</h1>

<div *ngFor="let questions of (businessImage$ | async)?.questions">
    <h1>{{question.question}}</h1>
    <ul>
        <li *ngFor="let answer of questions.answers">
            {{answer.answer}}
        </li>
    </ul>
</div>

没有出现错误，也没有任何渲染，现在 console.log() 显示了一个巨大的对象，我什至无法在其中找到数据。

Answer 1

尝试这些可能的修复方法：

在您的视图中使用安全导航 ("Elvis") 运算符以确保您不会遇到异步数据问题：

<div *ngFor="let questions of businessImage">
    <h1>{{questions?.question}}</h1>
    <ul>
        <li *ngFor="let answers of questions">
            {{answers?.answer}}
        </li>
    </ul>
</div>

其次，businessImage 似乎不是一个数组，因此它无法对其进行迭代（除非异步数据是一个列表）。这样定义它：

businessImage: bus_image[] = []

如果您正在接收列表。

如果您没有收到列表，则需要将迭代器更改为

<div *ngFor="let questions of businessImage?.questions">

Answer 2

好吧，在阅读了我能找到的所有内容几天后，我想到了这个解决方案。

我将实例 FirebaseListObservable 更改为 FirebaseObjectObservable。

然后在app.component我改变了

businessImage: bus_image;

一部分到

businessImage: FirebaseObjectObservable<any>;

之后我将模板更改为如下所示。

<div *ngFor="let question of businessImage?.questions">
    <h1>{{question.question}}</h1>
    <ul>
        <li *ngFor="let answer of question.answers">
            {{answer.answer}}
        </li>
    </ul>
</div>

在那之后一切都很顺利。感谢所有提供意见的人，它确实帮助我弄清楚了我需要研究什么才能解决这个问题。

Answer 3

我的问题是规则权限：默认情况下他们需要权限，所以修改了 Firebase 规则如下：

{
  "rules": {
    ".read": true,
    ".write": false
  }
}

使用 *ngFor 绑定从 Firebase 导入的数据时遇到问题

Having trouble binding data imported from Firebase with *ngFor

firebase

angularfire2

angular