在 Observable 中添加一个元素 - Ionic 4

Question

我是 ionic 的初学者，正在听讲师的教程。我有一个 ionic 4 购物应用程序，用户可以在其中将商品添加到他们的愿望清单中。我只是将项目 ID 添加到 firebase firestore 中的愿望清单集合。现在，当我检索心愿单并想在心愿单中显示项目时，我从心愿单集合中获取项目 ID，然后使用这些项目 ID 从项目集合中获取项目。我被困在将项目添加到另一个可观察对象或数组的位置，以便我可以在愿望清单页面上显示这些项目。我试图查看其他解决方案，他们说我必须订阅或其他内容，但我发现很难理解，所以我发布了我的问题。下面是我的代码

项目界面

export interface Item { 
  id?: string, 
  name: string, 
  image: string, 
  price: number
}

wishlist、items、itemsCollection、wishlistcollection 和 wishlistItems 声明

  private items: Observable<Item[]>;
  private itemCollection: AngularFirestoreCollection<Item>;

  private wishlist: Observable<any>;
  private wishlistCollection: AngularFirestoreCollection<any>;
  private wishlistItems : Observable <Item[]>;

构造函数

constructor(private afs: AngularFirestore) {
  //save the collection from firebase firestore to itemCollection
  this.itemCollection = this.afs.collection<Item>('items');

  //save the collection from firebase firestore to wishlistCollection
  this.wishlistCollection = this.afs.collection('wishlist').doc(this.userID).collection('items');

  //listen to changes in item collection and save to items
  this.items = this.itemCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    ); 



  //listen to changes in wishlist collection and save to wishlist
  this.wishlist = this.wishlistCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
}

获取用于从项目集合中检索项目的项目代码

getItem(id: string): Observable<Item> {
    return this.itemCollection.doc<Item>(id).valueChanges().pipe(
      take(1),
      map(item => {
        item.id = id;
        return item
      })
    );
  }

现在这是根据 itemID 从心愿单中检索项目并保存到 wishListItems 的最终方法

getWishlistItems():Observable<any>{

    // get each id from wishlist
    this.wishlist.forEach(item =>{
      //retrieve the item from the items collection
      //but I don't understand how to add it to the wishlistItems since I can't push it to wishlistItems
      this.getItem(item.id);
    })
    return this.wishlistItems;
  }

Console.log(this.getItem(item.id));

给这个

{image: "mac.jpg", name: "MAC Cosmetics set", price: 35, id: "3w1HEZ8X11jldlcWkDDx"}
image: "mac.jpg"
name: "MAC Cosmetics set"
price: 35
id: "3w1HEZ8X11jldlcWkDDx"

如何将项目添加到 wishlistItems observable？

Answer 1

方法 getItem() return 是一个 observable，它在异步代码中使用以能够发出数据。然后你可以使用 subscribe 方法订阅那个 observable 并接收数据：

this.getItem(item.id).subscribe(items => {
    console.log(items);
    this.
 });

您的代码示例：

getWishlistItems(){
    this.wishlist.forEach(item =>{ 
    this.getItem(item.id).subscribe(items => {
       console.log(items);
       this.wishlistItems = items;
      });
    });
  }

这是在心愿单页面的 ngInit() 中运行的实际代码

this.crud.wishlist.subscribe(item =>{
      item.forEach(val =>{
        this.crud.getItem(val.id).subscribe(items => {
          this.wishlist.push(items);
        });
      });
    });

因此将 this.wishlistItems 的类型更改为 any 并将方法的类型更改为 getWishListItems()。我不确定你为什么要 return 但通常当你 subscribe 到 observable 来获取值时，你只需在模板中显示这些值。

在 Observable 中添加一个元素 - Ionic 4

Add an element in Observable - Ionic 4

firebase

angular

ionic4

google-cloud-firestore