Estoy usando Angular 12 con AngularFire/Firebase 9 (Modular). Tengo problemas para usar RxJS para recuperar la URL de descarga del almacenamiento y agregarla a cada elemento de un resultado de colección. Con el siguiente código, puedo ver los datos en la consola en "ZoneAwarePromise", pero no puedo ver los datos a través de la plantilla.
const listCollection = collectionData(collection(this.firestore, 'lists'), {idField: 'id'}); this.lists = listCollection.pipe(take(1), map(lists => lists.map(async list => { const imgRef = ref(this.storage, list.metaImage); const coverImg = await getDownloadURL(imgRef); return {...list, coverImg} })));Es difícil estar seguro de lo que ha escrito aquí, pero se parece a this.lists es un observable que emite una lista de promesas. Eso es lo que hace la palabra clave async, es azúcar sintáctico para crear promesas.
No ha tomado/usado los valores de las promesas en ninguna parte (es decir: no los está await en ninguna parte).
Una solución es reescribir sus promesas como observables usando forkJoin para ejecutar su matriz de observables.
Eso podría verse así:
const listCollection = collectionData(collection(this.firestore, 'lists'), {idField: 'id'}); this.lists = listCollection.pipe( take(1), map(lists => lists.map(list => { const imgRef = ref(this.storage, list.metaImage); return from(getDownloadURL(imgRef)).pipe( map(coverImg => ({...list, coverImg})) ) })), switchMap(listsCalls => forkJoin(listsCalls)) );Usar un switchMap para combinar los resultados funciona; sin embargo, causa algunos problemas de bloqueo de procesamiento en Angular (es decir, esperar a que todos los elementos de la "lista" devuelvan getDownloadUrl() antes de que la plantilla pueda mostrar los resultados). Eliminar "async" y "await" del código original y agregar una canalización "async" a la plantilla de Angular permite que los datos fluyan sin bloquear el renderizado.
lista.componente.ts
const listCollection = collectionData(collection(this.firestore, 'lists'), {idField: 'id'}); this.lists = listCollection.pipe(take(1), map(lists => lists.map(list => { const imgRef = ref(this.storage, list.metaImage); const coverImg = getDownloadURL(imgRef); return {...list, coverImg} })));lista.componente.html
<div class="card" *ngFor="let list of lists | async"> <div class="card-image"> <img [src]="list.coverImg | async" /> </div> <h2 class="card-title-lower"> <a [routerLink]="['/list', list.id]">{{ list.title }}</a> </h2> </div>