Estoy enfrentando un problema en mi proyecto, estoy usando Enrutamiento de niños anidados para mostrar datos en mi proyecto, quiero que los datos de este elemento específico se muestren una vez que haga clic en el botón, hice el enrutamiento correctamente, es simplemente no puedo obtener la función adecuada para los elementos.
Aquí está mi servicio
PostsService.service.ts
getPostById(id: string){ let docId = this.afs.collection('posts').doc(id).get() .subscribe( doc => { if(doc.exists){ console.log('Document Id => ', doc.id) console.log('Document data => ', doc.data()) }else { console.log('Document not found') } }); return docId; }y Aquí está mi función TS para el elemento único
.componente.ts
posts: Posts[] = []; post!:any; constructor( private PostsService: PostsService, private route: ActivatedRoute ) {} ngOnInit(): void { let id = this.route.snapshot.params['id'] this.PostsService.getPostById(id); }Está intentando obtener toda la colección con getPostById() y luego tratando de encontrar un solo documento de los resultados. Obtener la colección completa significa que leerá n cantidad de veces para n cantidad de documentos, lo cual es un desperdicio y lento.
Si pregunta algo con getPostById() , entonces también debe hacer algo con el retorno. En este momento estás preguntando, pero no estás haciendo nada con la devolución.
¿Qué tal si obtenemos el documento único? Devolverá un Observable, por lo que podemos seguir monitoreando el documento, o simplemente usar el valor nominal tal como está.
getPostById(id: string) { const itemDoc = this.afs.doc<any>('posts/' + id); return itemDoc.valueChanges(); }Y en tu componente, no olvides darte de baja del Observable.
ngOnInit() { let id = this.route.snapshot.params['id']; this.PostsService.getPostById(id).subscribe(post => { console.log(post); }) }