Angular6-异步变量仅在我手动刷新页面后才会以HTML显示

Question

我正在编写一个Angular应用程序，它将允许用户将配方保存在Firestore Cloud DB上。在我的RecipeDetails组件中，我从URL获取配方名称，然后通过服务获取它：

// Component call
constructor(private service: Service, private route: ActivatedRoute) {
    const recipeName = this.route.snapshot.paramMap.get('recipe');
    // This.recipe is an Observable<Recipe>
    this.recipe = this.service.getRecipe(recipeName);
  }


// Service method
getRecipe(name: string): Observable<Recipe> {
    return new Observable(observer => {
      this.recipes.subscribe(next => {
        for (const r of next) {
          if (r.name === name) {
            observer.next(r);
            observer.complete();
          }
        }
      });
    });
  }

这部分有效，但是HTML页面中的数据仅在加载一次后手动刷新页面时才会显示。我已经尝试了异步管道，但似乎无法解决问题。