时间戳

首页 > 解决方案 > 输入“承诺”' 缺少以下属性

angular - 输入“承诺”' 缺少以下属性

问题描述

我正在使用 @angular/common/http 中的 HttpClient 和 HttpResponse（认为在包中不可用）来从 Fiberbase 中以 agular 获取响应，但是在映射响应时存在一些类型转换问题，因为我认为响应会生成 Observable 作为返回类型。任何人都可以建议我哪里出错了。

我在分配 const recipes 时遇到错误（“类型'Promise'缺少类型'Recipe []'的以下属性：长度，流行，推送，concat，还有26个”）

import { HttpClient,HttpResponse } from '@angular/common/http';

getRecipes(){
        this.http.get('https://ng-recipe-book-cb551.firebaseio.com/recipes.json')
        .map(
            (response: Response) => {
                const recipes: Recipe[] = response.json();
                for(let recipe of recipes){
                    if(!recipe['ingredients']){
                        recipe['ingredients'] = [];
                    }
                }
                return recipes;
            }
        )
            .subscribe(
                (recipes: Recipe[]) => {
                    this.recipeService.setRecipes(recipes);
                }
            );
    }

我预计会从 response.json 获得一系列食谱

标签： angular

解决方案

你需要这样做

export interface Recipe {

  description: string
  imagePath: string,
  ingredients: Array<{
    amount: number,
    name: string}>,
  name: string
}

   this.http.get<Array<Recipe>>('https://ng-recipe-book-cb551.firebaseio.com/recipes.json')
    .pipe(
      map(data => {
        return data.map((i: Recipe) => {

          if (i.ingredients == null) {
            i.ingredients = [];
          }

          return i;
        });
      })

请参阅此处的工作示例

推荐阅读