Question

我正在使用@ angular / common / http的HttpClient和HttpResponse（认为在软件包中不可用）从afular中的Fiberbase获取响应，但是在映射响应时存在一些类型转换问题，因为我认为响应会生成Observable as返回类型。有人能建议我错了吗。

在为其指定状态时，我在const配方上遇到错误（“类型'Promise'缺少类型'Recipe []'的以下属性：长度，弹出，推送，连拍和另外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获取食谱数组

Answer 1

response.json()返回一个Promise。尝试使用JSON.parse(response)代替，它将解析您的数组为可用形式。

Answer 2

您需要这样做

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;
        });
      })

请参阅工作示例here

Answer 3

我尝试了您的代码，而您使用的Response接口类型错误，这会导致您遇到错误。

我建议您从 docs 阅读http客户端，以了解HttpClient的工作方式。 HttpClient解析您对某个对象的响应，因此您也无需使用response.json()。

此外，您还应该使用管道运算符。检查map的导入并将代码更改为：

import { map } from 'rxjs/operators';

// ...

return this.http.get<Recipe[]>('...').pipe(
  map((response: Recipe[]) => {
    for (let recipe of response) {
      if (!recipe['ingredients']) {
        recipe['ingredients'] = [];
      }
     }
     return response;
    }
  )
)

我还想知道firebase的使用，如果您实际上在项目中使用firebase，建议您研究一下angularfire以“正确”使用它，我们通常不使用http-requests来获取数据从firebase。

类型“ Promise <any>”缺少以下属性

3 个答案: