Как получить данные и отобразить в html из firebase, используя angular / typcript

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 находится внутри каждого цикла, поэтому он печатается каждый раз.Но вы присваиваете значение одной и той же переменной каждый раз.это перезаписывается.Вам понадобится массив или несколько переменных для отображения всех

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>