* ngfor angular2整合laravel

我使用的firsst时间的角度，我建立一个API的服务来获得JSON数组对象从laravel后端数据：* ngfor angular2整合laravel

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

在我的部分我用的是这种服务即：

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

但在模板我用

<ul class="resp-tabs-list"> 
<li class="resp-tab-item" (click)="onGetFoodsByCategorie(1)">Panninis</li> 
<li class="resp-tab-item" (click)="onGetFoodsByCategorie(2)">Tajines</li> 
<li class="resp-tab-item" (click)="onGetFoodsByCategorie(3)">Sandwichs</li> 
<li class="resp-tab-item" (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"> 
"): [email protected]:32

来源

2017-03-14 MedKostali

我认为它跟这个相关的（你有一个输入，所以我的意思是ü修改数据） https://forum.ionicframework.com/t/2-way-data-binding-to-an-array-element-in-an-ngfor-ionic-2-rc1/67977/2

我认为你的名单再次ngFor当你改变一个字段的值重载，这就是为什么它失去了重点。您可以添加一个trackBy来确定列表是否必须重新加载。下面的代码似乎解决了问题：

<ion-list> 
<ion-item *ngFor="let item of itemList; let i = index; trackBy: customTrackBy"> 
    <ion-label stacked primary>An item</ion-label> 
    <ion-input type="text" [(ngModel)]="itemList[i]"></ion-input> 
</ion-item> 
</ion-list> 
And in the .ts file: 



customTrackBy(index: number, obj: any): any { 
return index; 
}

适应您的代码:)：

<ion-list> 
<ion-item *ngFor="let food of foods ; let i = index; trackBy: customTrackBy"> 
    //some data 
</ion-item> 
</ion-list>

而在你的.ts添加方法 'customTrackBy' 文件

来源

2017-03-14 22:34:26 Incognito

你是因为这件事而得到错误

[food]="foods"

食物不是li元素的属性只是删除它来解决错误简单地使用循环这样

<li *ngFor= "let food of foods"> 
    //some style and data 
<li>

E.g您使用的食物输入您的组件，并在循环的变量是同食的食物改变其中的一个或者

来源

2017-03-14 22:46:45

* ngfor angular2整合laravel

回答

相关问题