Ionic 2 - 动态填充段

Question

我有品类和菜品。每道菜都属于一个特定类型的类别。

我正在向 return 属于特定类别的所有菜肴发出 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 所以所有部分都只填充了汤。

Answer 1

多亏了 Mr.Gabriel 的评论，我才意识到我的做法完全错了！我返回并将属于特定类别的所有菜肴嵌套在同一个数组中，并通过以下方式访问它们：

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

Ionic 2 - 动态填充段

Ionic 2 - Populating segments dynamically

typescript

angularjs-directive

ionic2

angular