如何过滤离子2中阵列离子段中的对象

Question

以下是我的代码

.html文件

<ion-segment [(ngModel)]="kmart" color="primary">
    <ion-segment-button value="All">
      All
    </ion-segment-button>
    <ion-segment-button *ngFor="let tabName of buttonName" value={{tabName.product_type}}>
      {{tabName.product_type}}
    </ion-segment-button>

​

                   {{demo.name}}                                       {{demo.name}}               

.ts文件

demoObj = [ {"product_id": "52","name": "Apple - Fuji","product_type": "Fruits"},
              {"product_id": "53","name": "bana - Fuji","product_type": "Fruits"},
              {"product_id": "54","name": "beetroot - Fuji","product_type": "Vegitables"},
              {"product_id": "55","name": "beens - Fuji","product_type": "Vegitables"},
              {"product_id": "56","name": "mango - Fuji","product_type": "Fruits"}
            ];
  buttonName = [{"product_type": "Fruits"},{"product_type": "Vegitables"}]

问题：

我能够在离子段中显示Product_type，但我不能显示conent，即demoObj。 在单击“水果”或“蔬菜”时，我只需要显示其中的particualr对象，例如：

如果我点击蔬菜，那么我只需要显示beetroot - Fuji和beens - Fuji，这也应该发生在水果上。

我认为我无法分配value="demo.product_type"和*ngSwitchCase="'demo.product_type'“--这两者都是不匹配的，这也是我无法显示名称的方式。

Answer 1

试着：

 <ion-segment [(ngModel)]="kmart" color="primary">
        <ion-segment-button *ngFor="let tabName of buttonName" value={{tabName.product_type}}>
          {{tabName.product_type}}
        </ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="kmart" *ngFor = "let demo of demoObj">
    <ion-list *ngSwitchCase="demo.product_type">
        <ion-item>
              {{demo.name}}
            </ion-item>
    </ion-list>
</div>

从本质上讲，kmart将是“水果”。

希望这能帮上忙！