Я не могу отобразить свой единственный продукт из firebase с angular - PullRequest
Новая
       45

Я не могу отобразить свой единственный продукт из firebase с angular

1 голос
/ 02 августа 2020

Итак, я пытаюсь показать свой продукт на странице сведений о продукте, но ничего не отображается. Я не знаю, в чем проблема ... Мне действительно нужна помощь, потому что я не могу go дальше, если эта проблема не будет устранена. Спасибо всем. 

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>

1 Ответ

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

Попробуйте изменить метод для одного продукта следующим образом: 

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>

Если у Вас есть вопросы, не стесняйтесь спрашивать

...