在 Ionic 应用程序中显示嵌套的 Firebase 数据答案

【问题标题】：Displaying Nested Firebase Data in an Ionic Application在 Ionic 应用程序中显示嵌套的 Firebase 数据
【发布时间】：2018-03-22 13:01:52
【问题描述】：

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

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

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

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

Firebase database

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>

【问题讨论】：

标签： angular firebase ionic-framework

【解决方案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

【讨论】：

course.name 显示两个课程（1 和 2）的名称，但我只想显示课程 1 的名称，即“math”
您正在循环浏览课程，所以这是预期的输出，如果您只想显示课程 1，那么您应该将查询更改为 db.list('/courses/1').valueChanges() 并删除循环。