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

Posted 2023-03-13

【中文标题】离子 |未显示来自 Firebase 的结果

【英文标题】：IONIC | Not showing results from firebase

【发布时间】：2018-06-16 07:25:46

【问题描述】：

所以是的...我不确定发生了什么。基本上 - 我只想显示来自 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。任何帮助表示赞赏。谢谢。 老实说，我不明白为什么这行不通。我想我的一切都是正确的。

【问题讨论】：

检查 currentTeam 里面的内容，数据是否正确？

@laker “检查 currentTeam 内部”是什么意思？

根据错误消息，问题似乎是在这段代码中：<ion-item ngFor="let team of currentTeam | async"> team.number 团队未定义。所以看起来currentTeam 中的数据不是您所期望的。你调试过它们吗？他们是对的吗？

【参考方案1】：

试试这个

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