使用 Ionic 从 Firebase 显示值时遇到问题答案

【问题标题】：Trouble Displaying Values From Firebase Using Ionic使用 Ionic 从 Firebase 显示值时遇到问题
【发布时间】：2020-04-29 06:22:34
【问题描述】：

我不太了解 Angular，我正在尝试使用我在 firebase 中的数据创建一个简单的游戏信息页面。我已经通过页面加载时的 getData 函数将数据加载到页面上。我可以在控制台中看到输出的值，但是当我尝试在 HTML 中调用它们时，我会出现空白。

我用来调用数据的值与我在其他地方使用的值相同，但我似乎不知道如何在这里调用它们。帮助？

这是控制台输出的内容：

Object
game: "Football"
description: "24 people for 12 v 12. 40 minutes. "
image: "https://ionicframework.com/dist/preview-app/www/assets/img/advance-card-map-madison.png"
location: "Austin"
players: "24"
id: "99rnLdx7gk4rCniE1yrq"

这是我将数据写入控制台的 ts 文件/函数的顶部：

import { NavController, ModalController, NavParams } from 'ionic-angular';
import { AuthService } from '../services/auth.service';
import { FirebaseService } from '../services/firebase.service';
import { UserDetailsPage } from '../user-details/user-details';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-game-info',
  templateUrl: 'game-info.html'
})

export class GameInfoPage {

  items: Array<any>;
  item: any;
  value: any;
  id: any;
  data: Array<any>;


  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private modalCtrl: ModalController,
    private authService: AuthService,
    private firebaseService: FirebaseService
  ) {
  }

  ionViewWillEnter(){
    this.getData();
  }

  getData(){
    let data = this.navParams.get('data');

    console.log(data);
  }

最后，这是我的 HTML 文件：

<ion-header>
        <ion-toolbar color="secondary">
          <ion-title center>Game Info</ion-title>

          <ion-buttons end>
            <button ion-button icon-only (click)="logout()">
                <ion-icon name="log-out"></ion-icon>
              </button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
          <ion-content class="list-mini-content">

            <div text-center>
              <ion-img class="prof-img" src="../../assets/imgs/30073571_10156282406987329_8843328631007804748_o.jpg"></ion-img>
            </div>
            <div *ngFor="let item of items" text-center>
              <h2 center>{{item().game}}</h2>
                    <ion-item padding>
                    <p>{{data().location}}</p>
                    <button ion-button icon-start clear item-end (click)="viewUserDetails(item.payload.doc.id,item.payload.doc.data())">
                      <ion-icon name="create" ></ion-icon> Edit
                    </button>
                  </ion-item>
          <ion-row>
            <ion-item padding>
                    <span>{{item.payload.doc.data()}}</span>
                    <button ion-button icon-start clear item-end>
                      <ion-icon name="navigate"></ion-icon>
                      Join
                    </button>
                  </ion-item>
                  </ion-row>
                </div>
          </ion-content>

          <ion-footer>

             </ion-footer>

感谢任何帮助。

【问题讨论】：

您在模板中显示项目数组，但在组件中初始化数据数组

标签： angularjs angular firebase ionic-framework firebase-realtime-database

【解决方案1】：

改变这个：

getData(){
    let data = this.navParams.get('data');

    console.log(data);
  }

进入这个：

getData(){
    this.data = this.navParams.get('data');

    console.log(this.data);
  }

data 需要是一个实例变量才能在模板中使用它。

也改变：

<h2 center>{{item().game}}</h2>
                    <ion-item padding>
                    <p>{{data().location}}</p>

进入这个：

<h2 center>{{item.game}}</h2>
                    <ion-item padding>
                    <p>{{data.location}}</p>

item 和 data 都是属性，因此您无需添加 ()

【讨论】：