Ionic 2 - 动态填充细分

时间:2017-09-02 12:10:54

标签: angular typescript angularjs-directive ionic2

我有类别和菜肴。每道菜都属于特定类别。

我发出http请求以返回属于特定类别类别的所有菜肴。所以我用

获得一个数组
{
  Soup[{'Name','Description', 'Price'..}, ..], 
  Chicken[{'Name','Description',..}], ...
}

其中包含所有汤类似我在一个数组中有所有的鸡。现在,我使用以下方法为每个类别动态创建了段:

<ion-segment [(ngModel)]="relationship" color="primary">
    <ion-segment-button  *ngFor ="let category of categories" value="{{category.Name}}">
  {{category.Name}} ({{category.Listings}})
    </ion-segment-button> 
</ion-segment>

现在,我正在努力解决的问题是如何根据类别类型填充这些细分市场。所以汤段将有所有的汤。鸡肉段将有所有的鸡等等。

到目前为止我所拥有的是:

<div [ngSwitch]="relationship" *ngFor = "let category of categories"> 
  <ion-list *ngSwitchCase="category.Name" ngSelected="selected">
    <ion-item *ngFor = "let dish of Dishes">
      <h2> {{dish.Name}}</h2>
    </ion-item>
  </ion-list>
</div>

我想做的是以某种方式遍历Dishes数组中的类别并获取属于该特定类别的每个dish.Name

现在我已将Dishes定义为data.data.Soup,因此所有片段都只填充了汤。

1 个答案:

答案 0 :(得分:2)

感谢加布里尔先生的评论,我意识到我完全错了!我回去并嵌套了属于同一阵列中特定类别的所有菜肴,并通过以下方式访问它们:

    <div  [ngSwitch]="relationship" *ngFor = "let category of categories">

    <ion-list *ngSwitchCase="category.Name" ngSelected="selected">

    <ion-item *ngFor = "let dish of category.Dishes">
    <h2> {{dish.Name}}</h2>
  </ion-item>
   </ion-list>
   </div>