如何使用 angular/typescript 从 firebase 获取数据并在 html 中显示

Question

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

<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 上得到它时，只有第一个带有描述标题和价格的帖子。
但是在控制台中我明白了

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 each 循环中，这就是它每次都被打印的原因。但是您每次都将值分配给同一个变量。它被覆盖。您需要一个数组或多个变量来显示全部

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>