Проблемы с отображением значений из Firebase с использованием Ionic - PullRequest
Новая
       16

Проблемы с отображением значений из Firebase с использованием Ionic

1 голос
/ 12 января 2020

Я не очень хорошо знаю 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 Ответ

0 голосов
/ 12 января 2020

Измените это: 

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 являются свойствами, поэтому вам не нужно добавлять ()

...