* ngForフェッチjsonデータ配列オブジェクトを1ページに取り込みます

Question

これはAngular2を使用した私の最初のプロジェクトです。角度のあるフロンではファイルルートを使用しません。laravel 5.4のデータを取得するAPIを構築します。

getFoodsByCat(id :number): Observable<any> { 
    return this.http.get('http://livrer/api/menu/' +id) 
    .map(
     (response: Response) => { return response.json().foods; 
     } 
    );} 

は私のコンポーネントでは、私はそのように、このサービスを使用します。

{"foods":[{"id":10,"designation":"pannin fromage","description":" 
Pannini fromage cornichon<\/p>","prix":25,"created_at":"2017-03-11 17:59:34","updated_at":"2017-03-11 ...}]} 

：

import {Response} from '@angular/http'; 
import { Food } from "./food.interface"; 
import { FoodService } from "./food.service"; 
    export class FoodsComponent implements OnInit { 
    @Input() food : Food ; 
    foods: Food[]; 

     constructor(private foodService: FoodService) { } 

     ngOnInit() { 
     onGetFoodsByCategorie(id){ 

     this.foodService.getFoodsByCat(id) 
     .subscribe(
     (foods: Food[])=> this.foods = foods, 
     (error : Response)=> console.log(error) 
     ); 
      } } 

このサービス機能はそのようなJSONレスポンスを取得します私はオンロードブークレを使用したテンプレートに

がデータに= 1

<ul class="resp-tabs-list"> 
<li class="active" (load)="onGetFoodsByCategorie(1)">Panninis</li> 
<li (click)="onGetFoodsByCategorie(2)">Somthing</li> 
<li (click)="onGetFoodsByCategorie(3)">Sandwichs</li> 
<li (click)="onGetFoodsByCategorie(4)">Pizzas</li> 
</ul> 
    <li *ngFor= "let food of foods" [food]="foods"> 
    //some style and data 
    </li> 

最初の要素IDを取得開始し、私はこのエラーを取得：

Error: Template parse errors: 
Can't bind to 'food' since it isn't a known property of 'li'. (" 


<li *ngFor= "let food of foods" [ERROR ->][food]="foods"> 
    <div class="item"> 
    <div class="thumbnail-menu-modern"> 
"): FoodsComponent@26:32 

Answer 1

あなたは、子コンポーネントに親からのデータを送信したい場合@Inputを使用してください。 @Inputは、親コンポーネントではなく子コンポーネントで設定する必要があります。

親コンポーネント

import {Response} from '@angular/http'; 
import { Food } from "./food.interface"; 
import { FoodService } from "./food.service"; 
export class FoodsComponent implements OnInit { 
    foods: Food[]; 
    constructor(private foodService: FoodService) { } 

    ngOnInit() { 
    onGetFoodsByCategorie(id){ 

    this.foodService.getFoodsByCat(id) 
    .subscribe(
    (foods: Food[])=> this.foods = foods, 
    (error : Response)=> console.log(error) 
    ); 
}} 

チャイルドコンポーネント

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'child-comp', 
    template: '<h3>"{{food}}"</h3>' 
}) 
export class ChildComponent { 
    private _food = ''; 
    @Input() 
    set food(food: string) { 
    this._food = (name && food.trim()) || '<no name set>'; 
    } 
    get food(): string { return this._food; } 
} 

このような親テンプレート内の子コンポーネントのセレクタを使用します。アレイ内の各食品を送る場合は、食品ではなく食品を使用することに注意してください。下の私の例は、表示される子要素に各食品を送ります。あなたが子供に食品の配列を送信したい場合は、ちょうどあなたのAPIが成功を呼ぶん<child-comp [food]="foods"></child-comp>

<ul class="resp-tabs-list"> 
<li class="active" (load)="onGetFoodsByCategorie(1)">Panninis</li> 
<li (click)="onGetFoodsByCategorie(2)">Somthing</li> 
<li (click)="onGetFoodsByCategorie(3)">Sandwichs</li> 
<li (click)="onGetFoodsByCategorie(4)">Pizzas</li> 
</ul> 
<child-comp *ngFor= "let food of foods" [food]="food"></child-comp>