如何在陣列離子段在離子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凱馬特是 '水果'。

希望這會有所幫助！