Question

我无法弄清楚如何让我的数据显示在我的模板中。我在我的组件的console.log()中添加了ngOnInit，以确保该服务正在检索和传送数据，并且确定我得到的结果。

在控制台的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>

这是在任何其他时间执行此操作时始终有效的方式。我还使用let question of businessImage.questions和{{question}}尝试{{questions.question}}。无论哪种方式，我都会在questions上收到未定义的错误。

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

我唯一能想到的可能就是firebase自动添加键的方式我最初编码的questions[]和answers[]数组。任何人都可以对此有所了解吗？

更新

这就是我现在在课堂上所拥有的。

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

尝试以下可能的解决方法：

在您的视图中使用安全导航（＆＃34; Elvis＆＃34;）运算符，以确保您不会遇到异步数据问题：

<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
  }
}

无法将从Firebase导入的数据与* ngFor绑定

3 个答案: