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

Question

I want to display all my posts with description title and price in my html using angular i am using firebase .
Here is my Code

<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>

When I console.log() I get all my posts whit all I need but when I get it on html there is just first post with description title and price.
But in Console i get it

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

well your console.log is inside the for each loop thats why it gets printed everytime. But you're assigning the value to the same variable each time. it gets overwritten. You'll need an array or multiple variables to display all

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>