我无法使用 angular 显示来自 firebase 的单个产品

Question

所以我试图在产品详细信息页面中显示我的产品，但我什么也没显示。 我不知道问题出在哪里。我真的需要一些帮助，因为如果这个问题没有得到解决，我将无法更进一步。谢谢大家。

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>

Answer 1

尝试这样的单品更换方法：

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

并在您对此进行详细的页面更改

this.bayonetSingle = this.ProduseService.getProductDetails(this.bayonetID)
.subscribe(proddet => {
    this.bayonetSingle = proddet.data();
    console.log(this.bayonetSingle);
    });
    

如果这不起作用，请尝试在 You detal page creat all 方法中，例如。

const dbRef = this.afStore.doc<CutiteInterface>("bayonete/" + id);
dbRef.get().subscribe(prdet => {
const data = prdet.data();
console.log(data);
});

好的新版本我们尝试重写一些方法

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

对于单品

// get single product
  getProductDetails(id) {
    return this.afStore.collection("bayonete").doc(id).snapshotChanges();
  }

在你的组件页面中是这样的。

ngOnInit():void {
this.ProduseService.getProductDetails(this.bayonetID).subscribe(px => {
const data = px.payload.data() as CutiteInterface;;
this.beyondSingle = data;
// for test purpose
console.log(bayonetSingle.description);
}

在你的html页面中改变这个

<div class="product_descriere">
          {{ (bayonetSingle | async)?.description }}
        </div>

为此

<div class="product_descriere">
              {{ bayonetSingle.description }}
            </div>

你试试这个

<div class="product_descriere">
              {{ bayonetSingle.description | async }}
            </div>

如果您有任何问题，请不要犹豫