Question

我想在我的HTML中使用 firebase 在我的html中显示所有带有描述标题和价格的帖子。
这是我的代码

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
            Medical Tourism
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
    {{title}}
    {{desc}}
    {{price}}
</ion-content>
<ion-tabs>
    <ion-tab label="Get Card" icon="information-circle" href="tabs/(get-card:get-card)">
        <ion-router-outlet stack name="get-card"></ion-router-outlet>
    </ion-tab>
</ion-tabs>

当我 console.log（）时，我得到了所有我需要的信息，但是当我在html上获得信息时，只有第一条描述标题和价格的信息。
但是在Console中，我得到了

import { Component, OnInit, ViewChild } from '@angular/core';
import * as firebase from 'firebase/app';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
    selector: 'app-medtour',
    templateUrl: './medtour.page.html',
    styleUrls: ['./medtour.page.scss'],
})
export class MedtourPage implements OnInit {

    title: any;
    desc: any;
    price: any;

    constructor(public db: AngularFireDatabase) {

        firebase.database().ref().child("medtour_posts/").on('value', (shapshot) => {
            shapshot.forEach((child) => {
                this.title = child.val().title;
                this.desc = child.val().description;
                this.price = child.val().price;

                console.log(this.title,this.desc,this.price);
            })
        })
    }

    ngOnInit() {}



}

Answer 1

好吧，您的console.log在for每个循环中，这就是为什么每次都打印它的原因。但是，您每次都将值分配给相同的变量。它会被覆盖。您需要一个数组或多个变量才能显示全部

export class MedtourPage implements OnInit {

 childs: [];

    constructor(public db: AngularFireDatabase) {

firebase.database().ref().child("medtour_posts/").on('value', (shapshot) => {
      shapshot.forEach((child) => {
       this.childs.push(
        {title:child.val().title),
         desc:child.val().description),
         price:child.val().price)};
     })
  })
}




<ion-header>
<ion-toolbar>
    <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
        Medical Tourism
    </ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding *ngFor="let child in childs">
    {{child.title}}
    {{child.desc}}
    {{child.price}}
</ion-content>
<ion-tabs>
<ion-tab label="Get Card" icon="information-circle" href="tabs/(get-card:get-card)">
    <ion-router-outlet stack name="get-card"></ion-router-outlet>
</ion-tab>

如何使用angular / typescript从Firebase获取数据并以html显示

1 个答案: