我无法显示带角度的Firebase产品

所以即时通讯试图在产品详细信息页面中显示我的产品,但没有显示任何内容。 我不知道问题出在哪里..我真的需要一些帮助,因为如果这个问题没有解决,我将无法走得更远。谢谢你们。

product.service.ts
____________________

// Declarations
  bayonete: Observable<CutiteInterface[]>;
  loadBayonete: AngularFirestoreCollection<CutiteInterface>;
  bayonetProd;

// get all products
 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;        
          return { id, ...data };
        });
      })
    );
    return this.bayonetProd;
  }


// get single product
  getProductDetails(id) {
    return this.afStore.doc<CutiteInterface>("bayonete/" + id);
  }

现在,在我的详细信息页面中,我调用了我的产品,可以在控制台中看到该阵列,但是无法显示它

detail-product.page.ts
_____________________

// Declarations
  product?: CutiteInterface;
  bayonetSingle: Observable<CutiteInterface[]>;
  bayonetID: string;

 constructor(
    private route: ActivatedRoute,
    private navCtrl: NavController,
    private ProduseService: ProduseService,
    private afStore: AngularFirestore
  ) {

    this.bayonetID = this.route.snapshot.params["id"];
    this.ProduseService.GetBayonete().subscribe((products) => {
      this.product = products.find((a) => a.id === this.bayonetID);
      console.log(this.product);
    });
   
    this.bayonetSingle = this.ProduseService.getProductDetails(
      this.bayonetID
    ).valueChanges();
    console.log(this.bayonetSingle);
  }

在这里,我需要显示它:

product-detail.html

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