Как показать и получить идентификатор текущего документа из коллекции firebase при нажатии с angular? - PullRequest
Новая
       30

Как показать и получить идентификатор текущего документа из коллекции firebase при нажатии с angular?

0 голосов
/ 01 августа 2020

Я разрабатываю приложение с продуктами от firebase, и я должен перечислить их в виде списка и по отдельности. Для перечисления коллекций из моей базы данных я использовал: 

products.service.ts

// Calling firestore documents and collections
  bayonete: Observable<CutiteInterface[]>;
  loadBayonete: AngularFirestoreCollection<CutiteInterface>;
  bayonetProd;

// Function to get all collection
 GetBayonete() {
    this.loadBayonete = this.afStore.collection("bayonete");
    this.bayonetProd = this.loadBayonete.snapshotChanges().pipe(
      map((action) => {
        return action.map((a) => {
          const data = a.payload.doc.data() as CutiteInterface;
          const id = a.payload.doc.id;
          this.uniqueid = id;
          return { id, ...data };
        });
      })
    );

    return this.bayonetProd;
  }

homepage.ts

// Calling function
  ngOnInit() { 
    this.ProduseService.GetBayonete();
  }

homepage.html

// Showing products 
   <ion-slide *ngFor="let bayonetFirebase of ProduseService.bayonetProd | async"
        [routerLink]="['/produse','detalii-produse',bayonetFirebase.id]">
        <ion-card class="card_categ">
          <span class="tag">{{bayonetFirebase.tag}}</span>
          <ion-img class="categorii_images" [src]="bayonetFirebase.image"></ion-img>
          <ion-card-title class="produs-titlu">{{bayonetFirebase.title}}</ion-card-title>
          <span class="padding-produse"></span>
          <ion-card-subtitle class="reducere">{{bayonetFirebase.reducere}} Lei</ion-card-subtitle>
          <ion-card-subtitle class="prices">{{bayonetFirebase.price}} Lei</ion-card-subtitle>


          <button class="products-button btn"> ADAUGA IN COS </button>
        </ion-card>

      </ion-slide>

Проблема в том, что когда я нажимаю на один из продуктов, я не могу показать указанный c продукт ... On: ' / produse / detalii-produse / id '=> Я определил наблюдаемый 

Bayoneta: Observable<CutiteInterface>;

, но не работает: 

<ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-list>
          <div class="product_descriere">
            {{ ( this.Bayoneta | async)?.description}}
          </div>
          <div class="product_reducere">
            {{ ( this.Bayoneta | async)?.reducere}} Lei ( {{ ( this.Bayoneta | async)?.tag}})
          </div>
          <div class="product_pret">
            {{ ( this.Bayoneta | async)?.price}} Lei
          </div>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

Интерфейс такой: 

export interface CutiteInterface {
  id: string;
  title: string;
  description?: string;
  stoc: boolean;
  price: number;
  reducere: number;
  image: string;
  tag: string;
  userId: string;
}

Что мне делать дальше?

...