Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

477
Vistas
¿Cómo mostrar las subcolecciones de firebase en hmtl iónico?

Soy nuevo en Angular e Ionic, así que disculpe la pregunta.

Tengo una subcolección en Firebase, y podría recuperarla y mostrarla en la consola. imagen de la consola

Pero quiero mostrarlo en HTML.

página mecanografiada

 import { Component, OnInit } from '@angular/core'; import { AuthService } from '../services/auth.service'; import { Router } from '@angular/router'; import { AngularFirestore } from '@angular/fire/compat/firestore'; @Component({ selector: 'app-my-reservations', templateUrl: './my-reservations.page.html', styleUrls: ['./my-reservations.page.scss'], }) export class MyReservationsPage implements OnInit { user: any; userId: string; constructor( private auth: AuthService, private router: Router, private afs: AngularFirestore ) {} ngOnInit() { this.auth.user$.subscribe((user) => { this.userId = user.userId; }); } fetchBookings() { this.afs .collection('user') .doc(this.userId) .collection('BookingHistory') .get() .subscribe((querySnapshot) => { querySnapshot.forEach((doc) => { console.log(doc.id, ' => ', doc.data()); }); }); } }

página HTML

 <ion-content> <ion-button (click)="fetchBookings()"></ion-button> <ion-item *ngFor="What I need to write here?"> <ion-label>{{"What I need to write here?"}}</ion-label> </ion-item> </ion-content>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Primero deberá almacenar los datos en lugar de console.log() y extraer los datos con el método ngFor.

 <ion-content> <ion-button (click)="fetchBookings()"></ion-button> <ion-item *ngFor="let data of storedData"> <ion-label>{{data.TimeSlot}}</ion-label> <ion-label>{{data.BookedAt}}</ion-label> <ion-label>{{data.BookingDate}}</ion-label> </ion-item> </ion-content>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda