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);
    });

例如，如果此方法不起作用，请尝试在“最终页面”中创建所有方法。

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>

如果您有任何疑问，请随时询问

我无法从Firebase中以角度显示我的单个产品

1 个答案: