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

Posted 2023-03-08

【中文标题】使用 Ionic 从 Firebase 显示值时遇到问题

【英文标题】：Trouble Displaying Values From Firebase Using Ionic

【发布时间】：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>

感谢任何帮助。

【问题讨论】：

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

【参考方案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 都是属性，因此您无需添加 ()