Angular *ngFor在一个页面中获取json数据数组对象

这是我第一个使用Angular2的项目。我在angular Fronen中不使用任何文件路由，我构建了一个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;
         }
    );}

此服务函数获取json响应，如下所示：

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

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

{“foods”：[{“id”：10，“名称”：“pannin fromage”，“description”：”
Pannini fromage cornichon，“prix”：25，“创建于”：“2017-03-11 17:59:34”，“更新于”：“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>

Panniis
Somthing
三明治
比萨饼


//一些风格和数据

我得到这个错误：

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

错误：模板分析错误：
无法绑定到“食物”，因为它不是“li”的已知属性
][食物]=“食物”>
"): FoodsComponent@26:32

如果要将数据从父组件发送到子组件，请使用@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; }
}

子组件

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

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：'子组件'，
模板：“{{food}}”
})
导出类子组件{
私人食品=“”；
@输入（）
设置食物（食物：字符串）{
这个._food=（name&&food.trim（））| |“”；
}
获取食物（）：字符串{返回此。_food；}
}

并像这样使用父模板中的子组件选择器。请注意，如果要发送数组中的每个食物，请使用食物而不是食物。下面的示例将每个食物发送到要显示的子元素。如果要将食物数组发送给子元素，请使用

Panniis
Somthing
三明治
比萨饼

你的api调用成功了吗？它返回的数据没有任何错误吗？你是否用console.log（）尝试过？错误很明显。删除列表项上的[food]=“foods”。我想你可以使用ngFor对食物重复调用并在列表项中显示值。是的，我的api调用成功了例如ongetfoodcat（1）我的目标响应json:{“foods”：[{”id:10，“名称”：“pannin fromage”，“描述”：“pannin fromage cornichon”，“prix”：25，“创建时间”：“2017-03-11 17:59:34”，“更新时间”：“2017-03-11…”