Angular 角度2：从Firebase返回的数据是'；t映射到我的对象数组上

我用Angular 2使用Observables从Firebase中获取数据，但是，即使我从http调用中获得结果，我也无法将返回的对象映射到我的实体上

我想映射到一个配方数组中。食谱是：

export class Recipe {
    constructor(public name: string,
        public description: string,
        public imagePath: string,
        public ingredients: Ingredient[]) {
    }
}

包含配方数组和对负责获取数据的服务以及订阅服务器的第一次调用的组件类是：

export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [];

  constructor(private recipeService: RecipeService) { }

  ngOnInit() {
    this.recipes = this.recipeService.getRecipes();
    this.recipeService.recipesChanged.subscribe(
      (recipes: Recipe[]) => this.recipes = recipes
    );
  }
}

而在服务中获取数据的方法是：

  fetchData() {
    return this.http.get('https://...firebaseio.com/...json')
      .map((response: Response) => response.json())
      .subscribe(
      (data: Recipe[]) => {
        this.recipes = data;
        console.log(data);
        this.recipesChanged.emit(this.recipes);
      });

数据已正确检索，但未强制转换到我的配方[]，事实上，返回的对象的形式如下：

[object Object],[object Object]
   [
      0: {
         [functions]: ,
         __proto__: { },
         description: "Gioco",
         imagePath: "http://....png",
         ingredients: [
            0: {
               [functions]: ,
               __proto__: { },
               amount: 50,
               name: "Silicone",
               Symbol(observable)_g.ds6ymh8xmrz: undefined,
               Symbol(rxSubscriber)_h.ds6ymh8xmrz: undefined
            },
            1: {
               [functions]: ,
               __proto__: { },
               amount: 30,
               name: "Plastica",
               Symbol(observable)_g.ds6ymh8xmrz: undefined,
               Symbol(rxSubscriber)_h.ds6ymh8xmrz: undefined
            },
            length: 2
         ],
         name: "Lego",
         Symbol(observable)_g.ds6ymh8xmrz: undefined,
         Symbol(rxSubscriber)_h.ds6ymh8xmrz: undefined
      },
      1: {
         [functions]: ,
         __proto__: { },
         description: "Peluche",
         imagePath: "http://....png",
         name: "Orsacchiotto",
         Symbol(observable)_g.ds6ymh8xmrz: undefined,
         Symbol(rxSubscriber)_h.ds6ymh8xmrz: undefined
      },
      length: 2
   ]

怎么解决呢?

提前感谢

Output（）变量不打算在服务中使用，您应该映射响应并返回可观察的变量

fetchData() :Observable<Recipes> {
    return this.http.get('https://...firebaseio.com/...json')
      .map((response: Response) => <Recipe[]>response.json())
      });

此外，当您使用引用类型作为模型时，请使用接口

export interface Recipe {
        name: string;
        description: string;
        imagePath: string;
        ingredients: Ingredient[];

}

Output（）变量不打算在服务中使用，您应该映射响应并返回可观察的变量

fetchData() :Observable<Recipes> {
    return this.http.get('https://...firebaseio.com/...json')
      .map((response: Response) => <Recipe[]>response.json())
      });

此外，当您使用引用类型作为模型时，请使用接口

export interface Recipe {
        name: string;
        description: string;
        imagePath: string;
        ingredients: Ingredient[];

}

---

，因此HTTP响应将是一个JSON对象。如果要使用简单的cast，则应该使用

接口

——而不是

类

，因此HTTP响应将是JSON对象。如果你打算使用一个简单的cast，你应该使用一个

接口

-而不是

类

“subscribe”在类型“Recipe[]”上不存在。你为什么要订阅配方类型？我举了一个例子：“this.recipes.getRecipes（）.subscribe（recipes=>…”在“onInit”中正确的指令组件的名称是：this.recipeService.fetchData（）.subscribe（r=>{this.recipes=r}）；我必须解释一下，这是一个课程的练习，导师将输入/输出变量“recipes”因为它是从固定数据开始的。在正常情况下，我也不会将输出数据投入服务，但我想让它按原样工作。在您的示例中，我必须将变量设置为公共变量，以便在数据到达组件时可以进行同步。仅仅是一个练习没有什么错…“subscribe”不存在于“Recipe[]”类型上。为什么要订阅配方类型？我按照您的示例：“this.recipeService.getRecipes（）.subscribe（recipes=>…”组件“onInit”中的正确指令是：this.recipeService.fetchData（）.subscribe（r=>{this.recipes=r}）；我必须解释这是一门课程的练习，导师将输入/输出变量“recipes”只是因为它是从固定数据开始的。在正常情况下，我也不会将输出数据投入服务，但我想使它正常工作。用你的例子，我必须将变量作为公共，这样当数据涉及组件时，我可以同步。仅仅练习没有什么错。。。