Estoy usando Angular 10 y AngularFire para recopilar datos de Firebase. Ya tengo una lista de mis usuarios en mi componente users.component.ts y los incluyo en users.component.html. Entonces hago clic en el nombre del usuario y voy a user-details.component, donde obtengo el ID de usuario de la URL e imprimo este ID en mi vista.

Lo que necesito es usar este snapshotParam para obtener los datos de este usuario específico de firebase y mostrarlos en mi vista.

Algo como: const user = firestore.collection('users').doc(this.snapshotParam);

Pero cuando hago eso en ngOnInit, aparece el error: No se puede encontrar el nombre 'firestore'.

Y si lo pongo en el constructor, no puedo obtener el snapshotParam, que está declarado en ngOnINit.

¿Cuál es la mejor manera de hacerlo?

¡Gracias por la ayuda!

Mi código de datos de usuario es:

user-details.component.ts

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import {Observable} from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";  
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'ngbd-table-complete',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [NgbModalConfig, NgbModal, CountryService, DecimalPipe]
})
export class UserDetailsComponent implements OnInit {

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor( 
    private readonly route: ActivatedRoute,
    firestore: AngularFirestore,
    ) {

  }

  ngOnInit(): void {

    this.snapshotParam = this.route.snapshot.paramMap.get("id");

    this.route.paramMap.subscribe(params => {
      this.subscribedParam = params.get("id");
    });


  }

}

Ya puedo imprimir el ID de usuario en mi vista

user-details.component.html

<p><strong>USER ID:</strong> {{ snapshotParam }}</p>
0
Fernando Aureliano 22 oct. 2020 a las 17:02

1 respuesta

La mejor respuesta

Olvidó agregar "privado" al lado de "firestore" en su constructor. Luego, puede llamar a firestore en la función ngOnInit de esta manera:

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import {Observable} from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";  
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'ngbd-table-complete',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [NgbModalConfig, NgbModal, CountryService, DecimalPipe]
})
export class UserDetailsComponent implements OnInit {

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor( 
    private route: ActivatedRoute,
    private firestore: AngularFirestore,
    ) {

  }

  ngOnInit(): void {

    this.snapshotParam = this.route.snapshot.paramMap.get("id");

    this.route.paramMap.pipe(
        switchMap(params => {
            this.subscribedParam = params.get("id");
            return this.firestore.collection('users').doc(this.snapshotParam).valueChanges();
        })
    ).subscribe();


  }

ACTUALIZACIÓN Respecto a la vista
Definiría un observable y usaría la tubería asincrónica

Componente:

...
    this.user$ = this.route.paramMap.pipe(
        switchMap(params => {
            this.subscribedParam = params.get("id");
            return this.firestore.collection('users').doc(this.snapshotParam).valueChanges();
        })
    )

...

Plantilla:

    <div *ngIf="user$ | async as user">{{user.name}}</div>

2
Quentin Fonck 22 oct. 2020 a las 16:08