Question

我正在使用Ionic Framework和Firebase来创建应用，但我遇到了一些麻烦。我无法从Firebase显示我的数据。我正在为我的学校的课程创建一个数据库，我想显示每门课程的名称。

HTML插值似乎是最简单的方法，但它不起作用。我尝试过TypeScript和JavaScript解决方案，但那些让我感到困惑。

示例（见图）： {{1.name}}应返回数学 {{2.name}}应该返回艺术

这是我第一次在Stack Overflow上发帖，我现在已经试图解决这个问题2周了。我将不胜感激任何帮助。我已经包含了我的数据库的代码和图片。

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  courses: any[];

  constructor(db: AngularFireDatabase) {
    db.list('/courses').valueChanges()
      .subscribe(result => {
        this.courses = result;
        console.log(this.courses);
    });

  }

}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      Banner Mobile
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ul>
    <li *ngFor="let course of courses">
      {{ 1.name }}
    </li>
  </ul>
</ion-content>

Answer 1

HTML代码不正确1范围内没有变量，而是尝试访问变量course

<ion-content padding>
  <ul>
    <li *ngFor="let course of courses">
      {{ course | json }} 
    </li>
  </ul>
</ion-content>

JSON将允许您查看course对象的结构。我相信根据你的firebase结构，你想要访问的元素是course.name

在离子应用程序中显示嵌套的Firebase数据

1 个答案: