如何在阵列离子段在离子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。

在点击水果或Vegitables我需要只显示particualr对象在它例如：

如果我点击Vegitables然后我需要显示只有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> 

initally凯马特是 '水果'。

希望这会有所帮助！