Question

我使用最初的时间角度，我使用服务构建一个API来从laravel backEnd获取数据：

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">  
"): FoodsComponent@26:32

Answer 1

我认为它与此相关（你有输入所以我的意思是你修改数据） 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'方法

Answer 2

因为这件事你才会收到错误

[food]="foods"

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

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

例如，您正在使用食物作为您的组件的输入，并且循环变量与食物相同，食物会改变其中一种

* ngfor angular2集成在laravel中

2 个答案: