angular - RXJS AngularFire - 从 Observable 获取 Observables

Question

我一直在尝试从 Firebase 获取数据(使用 Angular)。

计划摘要

这是一个小应用程序，用于存储膳食食谱及其成分，以根据膳食计划(每日、每周等)生成累积的购物 list 。

我拥有的:

<强>1。 Firebase 数据库结构(片段)

    Ingredients (collection)
      Id: string
      Name: string
      Tags: array of string
    Recipes (collection)
      CreatedOn: Timestamp
      MealTitle: string
      MealType: string
      Method: string
      RecipeIngredients (subcollection)
        Id: string
        IngredientId: string
        ExtendedDescription: string
        QTY: number
        UOM: string

如您所见，Recipes 集合包含 RecipeIngredients 子集合，其中包含 Ingredients 集合中的 IngredientId 和一些附加数据。

<强>2。从特定配方的RecipeIngredients子集合中获取成分列表的方法

  getRecipeIngredients(recipeId: string): Observable<RecipeIngredient[]> {
    this.recipesCollection = this.afs.collection('Recipes', ref => ref.orderBy('CreatedOn', 'desc'));

    this.recipeIngredients = this.recipesCollection.doc(recipeId).collection('RecipeIngredients').snapshotChanges().pipe(
      map(changes => {
        return changes.map(action => {
          const data = action.payload.doc.data() as RecipeIngredient;
          data.Id = action.payload.doc.id;

          return data;
        })
      })
    )

    return this.recipeIngredients;
  }

<强>3。根据Id获取特定成分的方法

getIngredientById(ingredientId: string): Observable<Ingredient> {
    this.ingredientDoc = this.afs.doc<Ingredient>(`Ingredients/${ingredientId}`);

    this.ingredient = this.ingredientDoc.snapshotChanges().pipe(
      map(action => {
        if (action.payload.exists === false) {
          return null;
        } else {
          const data = action.payload.data() as Ingredient;
          data.Id = action.payload.id;
          return data;
        }
      })
    )

    return this.ingredient;
  }

<强>4。我想要实现的目标

我想在包含以下列的表中显示特定配方的成分列表:成分名称、扩展描述、数量、计量单位。问题是我不知道如何获取成分名称。对我来说合理的解决方案是在 getRecipeIngredients 内部执行此操作，并通过该字段或整个 Ingredients 集合扩展其返回结果。我尝试了 RxJS 运算符，例如 mergeFlat 或combineLatest，但我陷入困境。

我当然可以更改数据库结构，但这对我来说也是一个学习项目。我相信我迟早会遇到这样的挑战。

Answer 1

这是一个有趣的问题，但我想我已经解决了。请查看我的StackBlitz 。这个decision tree通常足以为大多数 Observable 场景提供一个函数，但我相信这个需要函数的组合。

相关代码:

const recipeId = 'recipe1';
this.recipe$ = this.getRecipeIngredients(recipeId).pipe(concatMap(recipe => {
  console.log('recipe: ', recipe);
  const ingredients$ = recipe.recipeIngredients.map(recipeIngredient => this.getIngredientById(recipeIngredient.id));
  return forkJoin(ingredients$)
    .pipe(map((fullIngredients: any[]) => {
      console.log('fullIngredients: ', fullIngredients);
      fullIngredients.forEach(fullIngredient => {
        recipe.recipeIngredients.forEach(recipeIngredient => {
          if (recipeIngredient.id === fullIngredient.id) {
            recipeIngredient.name = fullIngredient.name;
          }
        });
      });
      return recipe;
  }));
})).pipe(tap(finalResult => console.log('finalResult: ', finalResult)));

我添加了控制台日志，以帮助说明数据通过管道传送时的状态。这里的主要思想是使用 concatMap 告诉配方 Observable，一旦这个可观察对象完成，我需要将其映射到另一个可观察对象，然后使用 forkJoin 来获取每个配方成分的完整表示，最后将这些结果映射回原始配方。