Collections within documents in firebase and angular 7

Question

Collections within documents in firebase and angular 7

Navigation

#1 by (2 votes)

2

I have the following code to obtain two observables in one and be able to manipulate them.

public products: any;


ngOnInit() {
        this.products = this.productService.products().snapshotChanges().map(productSnaps => {
          return productSnaps.map(product => {
            const productData = product.payload.doc.data();
            const productId = product.payload.doc.id;
            return this.productService.getProductImages(productId).snapshotChanges().map(uploadSnap => {
              let number = 0;
              return uploadSnap.map(upload => {
                if(number == 0) {
                  number++;
                  return upload.payload.doc.data();
                }
              })
            })
            .map(uploads => {
              return {productId, ...productData, uploads: uploads};
            })
          })
        })
        .flatMap(products => Observable.combineLatest(products));
      }

The services of products () and getProductImages () are as follows:

type productsCollection = AngularFirestoreCollection<Product[]>;

products(): productsCollection {
    return this.afs.collection<Product[]>('products');
  }

getProductImages(productId: string) {
    return this.afs.doc<Product>('products/${productId}').collection('uploads');
  }

I have a base in firebase with the following structure:

But he does not compile me with rxjs 6, I tried to do it like this:

ngOnInit() {    
    this.products = this.productService.products().snapshotChanges().pipe(map(productSnaps => {      
        return productSnaps.map(product => {          
          const productData = product.payload.doc.data();
          const productId = product.payload.doc.id;

          return this.productService.getProductImages(productId).snapshotChanges().pipe(map(uploadSnap => {
              let number = 0;
              return uploadSnap.map(upload => {
                if (number === 0) {
                  number++;
                  return upload.payload.doc.data();
                }
              });
            }),
            map(uploads => {
              return {productId, ...productData, uploads: uploads};
            })
          );
        });

      })
    ).flatMap(products => Observable.combineLatest(products));    
  }

But the flatMap and the combineLatest error mark

What at the end of accounts I need is that in the variable products both the documents of the collection "products" are stored as well as the collection that is inside each document and that contains the images of these.

and be able to use them like this:

<img height="250" *ngIf="product.uploads[0]" mat-card-image [src]="product.uploads[0].url" />
<mat-card-title>{{ product.name }}</mat-card-title>

in advance thank you very much

firebase angular angular5

asked by razadi 24.11.2018 в 23:54

source

1 answer

Problem when creating object with tinker (Laravel) access the value of a div within a li element

score 2 · Answer 1

After so much testing, this is the way that worked for me and I want to share it, greetings and thanks.

onInit() {
   this.products = this.productService.products(tipo).snapshotChanges().pipe(
      map(productSnaps => {      
        return productSnaps.map(product => {          
          const productData = product.payload.doc.data();
          const productId = product.payload.doc.id;

          return this.productService.getProductImages(productId).snapshotChanges().pipe(
            map(uploadSnap => {
              let number = 0;
              return uploadSnap.map(upload => {
                if (number === 0) {
                  number++;
                  return upload.payload.doc.data();
                }
              });
            }),
            map(uploads => {

              return {productId, ...productData, uploads: uploads};

            })
          );
        });

      }),
      flatMap(products => combineLatest(products))
    );
}

I hope you serve them like me!