* ngFor在一個頁面中獲取JSON數據數組對象

Question

這是使用Angular2，我不使用任何文件路徑在我的角度fronEnd我建立一個API來獲取與服務JSON數組對象從laravel 5.4後端數據我的第一個項目：

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

在我的部分我用這個服務這樣的：

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響應：

{"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 ...}]} 

在我使用的onload的仿羔皮呢模板開始獲取數據的第一個元素ID = 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> 

我得到這個錯誤：

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

和使用這樣的父模板的子組件選擇。請注意，如果您要發送每種食物在陣列中，使用的食品，而不是食品。我下面的例子將每種食品發送到子元素顯示。如果你想發送食物給孩子，只需使用<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>