Ionic无法显示Firebase数据问题求助

首先看你遇到的错误：TypeError: Cannot read property 'number' of undefined，这是因为模板里的team变量变成了undefined，导致访问team.number失败，根源出在数据类型不匹配和模板用法错误上，我来一步步帮你修正：

错误原因拆解 #

1. async管道用错了对象：你在模板里给currentTeam加了async管道，但currentTeam并不是Angular的Observable，而是你通过原生Firebase的teamSnapshot.val()直接赋值的普通JS对象，async管道只对Observable/Promise生效，这会导致数据解析异常。
2. ngFor的使用场景不对：ngFor是用来遍历数组的，如果你的Firebase节点/2771是单个团队对象（而不是数组/列表），强行用ngFor循环会把单个对象拆成属性遍历，导致team变成undefined。

解决方案（分两种数据结构情况） #

情况1：/2771是单个团队对象 #

如果Firebase里/2771节点的数据是这样的：

{
  "number": "2771",
  "match": "1"
}

修改Home.ts

改用AngularFire2的Observable方式获取数据（更符合Angular/Ionic的最佳实践，还能自动处理订阅销毁）：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AddPage } from '../add/add';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  // 定义为Observable类型
  currentTeam: Observable<any>;

  constructor(
    public navCtrl: NavController,
    public afd: AngularFireDatabase
  ) {
    // 通过AngularFire获取单个节点的Observable
    this.currentTeam = this.afd.object('/2771').valueChanges();
  }

  add(){
    this.navCtrl.push(AddPage);
  }
}

修改Home.html

去掉ngFor，用async管道订阅Observable并获取对象：

<ion-header>
  <ion-navbar color="codeRed">
    <ion-title> Scouting </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="add()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-card>
    <ion-card-header> Scouting </ion-card-header>
    <ion-list>
      <!-- 用async管道订阅，并用as语法把数据赋值给team变量 -->
      <ion-item *ngIf="currentTeam | async as team">
        {{team.number}} {{team.match}}
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

情况2：/2771是多个团队的列表 #

如果Firebase里/2771节点是多个团队对象的集合，比如：

{
  "team1": { "number": "2771", "match": "1" },
  "team2": { "number": "1234", "match": "2" }
}

修改Home.ts

用list方法获取列表数据的Observable：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AddPage } from '../add/add';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  // 定义为数组类型的Observable
  currentTeam: Observable<any[]>;

  constructor(
    public navCtrl: NavController,
    public afd: AngularFireDatabase
  ) {
    // 通过AngularFire获取列表节点的Observable
    this.currentTeam = this.afd.list('/2771').valueChanges();
  }

  add(){
    this.navCtrl.push(AddPage);
  }
}

修改Home.html

用ngFor遍历Observable返回的数组：

<ion-header>
  <ion-navbar color="codeRed">
    <ion-title> Scouting </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="add()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-card>
    <ion-card-header> Scouting </ion-card-header>
    <ion-list>
      <!-- async管道先解析Observable为数组，再用ngFor遍历 -->
      <ion-item *ngFor="let team of currentTeam | async">
        {{team.number}} {{team.match}}
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

额外提示 #

• 先确认Firebase数据库中/2771节点的实际数据结构，这是选择哪种方案的关键。
• 用AngularFire2的valueChanges()配合async管道，会自动帮你处理订阅和取消订阅，避免内存泄漏，比原生Firebase的on('value')更省心。
• 首次接触的话，可以先从AngularFire2的基础用法入手，理解object和list的区别，这会帮你少踩很多坑。

内容的提问来源于stack exchange，提问作者Kamden Bolhuis