Soy nuevo en Firebase. Estoy usando la base de datos de Firestore e Ionic, tengo este problema con una llamada asíncrona y no puedo resolverlo. Básicamente en la variable item van los datos que tengo guardados en la base de datos firestore. Pero cuando quiero mostrarlos, a través de un botón, en una nueva página html sucede algo extraño, en la url aparece el parámetro pasado y desaparece inmediatamente y ya nada funciona. Tuve un problema similar en el pasado que resolví usando la tubería angular "async", pero en este caso ni siquiera funciona. En detalle, tengo una lista de elementos en un componente:
ngOnInit() { this.itemService.getItemsList().subscribe((res)=>{ this.Tasks = res.map((t) => { return { id: t.payload.doc.id, ...t.payload.doc.data() as TODO }; }) }); }y en item.service.ts he definido la función:
constructor( private db: AngularFireDatabase, private ngFirestore: AngularFirestore, private router: Router ) { } getItemsList() { return this.ngFirestore.collection('items').snapshotChanges(); } getItem(id: string) { return this.ngFirestore.collection('items').doc(id).valueChanges(); }Para cada artículo tengo un botón para mostrar el detalle:
<ion-card *ngFor="let item of Tasks" lines="full"> .... <ion-button routerLinkActive="tab-selected" [routerLink]="['/tabs/item/',item.id]" fill="outline" slot="end">View</ion-button>En el componente itemsDescription.ts tengo:
ngOnInit() { this.route.params.subscribe(params => { this.id = params['id']; }); this.itemService.getItem(this.id).subscribe((data)=>{ this.item=data; }); }Finalmente en la página html:
<ion-card-header> <ion-card-title>{{item.id}}</ion-card-title> </ion-card-header> <ion-icon name="pin" slot="start"></ion-icon> <ion-label>{{item.Scadenza.toDate() | date:'dd/MM/yy'}}</ion-label> <ion-card-content>{{item.Descrizione}}</ion-card-content>Se muestra la información de Scadenza y Descrizione, en cambio, no se muestra la identificación. Además, la URL debe ser pestañas/elementos/:id, pero cuando hago clic en el botón para mostrar la información del elemento, el parámetro pasado desaparece inmediatamente y solo se muestran las pestañas/elementos. Si elimino los datos en {{}}, el parámetro de la URL no desaparece
RESUELTO Seguí esta guía https://forum.ionicframework.com/t/async-data-to-child-page-with-ionic5/184197 . Entonces poner? , por ejemplo {{item?.id}} ahora todo funciona correctamente
Su orden de código anidado no es correcto. Obtendrá el valor de la identificación después de la suscripción.
Verifique este código:
ngOnInit() { this.route.params.subscribe(params => { this.id = params['id']; this.profileService.getItem(this.id).subscribe((data)=>{ this.item=data; }); }); }