* 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

回答

相關問題