离子 |未显示来自 Firebase 的结果

Question

所以是的...我不确定发生了什么。基本上 - 我只想显示来自 firebase 的结果。这是我的代码。

错误

TypeError: Cannot read property 'number' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/HomePage.ngfactory.js:82:30)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:14730:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13866:14)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14143:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13867:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
    at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:14169:17)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13862:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)

首页.TS

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { AddPage } from '../add/add';
import { AngularFireAction } from 'angularfire2/database/interfaces';
import { AngularFireDatabase } from 'angularfire2/database';

import firebase from 'firebase';

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

  teamList: any;

  public currentTeam = {};

  constructor(
    public navCtrl: NavController, 
    public afd: AngularFireDatabase) { 
    }

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

  ionViewDidLoad(){
    const teamRef: firebase.database.Reference = 
    firebase.database().ref('/2771');
    teamRef.on('value', teamSnapshot => {
      this.currentTeam = teamSnapshot.val();
      console.log(this.currentTeam);
    });
  }



}

主页.html

<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>
        <ion-item ngFor="let team of currentTeam | async">
          {{team.number}}
          {{team.match}}
        </ion-item>
    </ion-list> 

  </ion-card>
</ion-content>

package.json

{
  "name": "OfflineScoutingV6",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "angular2-moment": "^1.7.1",
    "angularfire2": "^5.0.0-rc.4",
    "firebase": "4.8.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

这是我第一次使用 firebase 和 ionic。任何帮助表示赞赏。谢谢。 老实说，我不明白为什么这行不通。我想我的一切都是正确的。

Answer 1

试试这个

<ion-list>
        <ion-item ngFor="let team of currentTeam | async">
          {{team?.number}}
          {{team?.match}}
        </ion-item>
</ion-list>