각도 2 : Firebase에서 반환 된 데이터가 내 배열 객체에 매핑되지 않았습니다.

Question

Observables를 사용하여 Firebase에서 Observables를 사용하여 데이터를 가져 왔지만 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 
    ] 

어떻게 해결할 수 있습니까? 사전에

덕분에

Answer 1

출력() 변수는 응답을지도하고의 onInit에서 같은

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

으로 관찰을 반환해야합니다, 서비스를 사용하기위한 것은 아니다

this.recipeService.getRecipes().subscribe(recipes => { 
     this.recipes = recipes; 
}); 

또한 모델로 사용할 참조 유형을 사용할 때 인터페이스

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

}