如何在离子 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>

.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"}]

问题：

i am able to display the Product_type in the ion-segment but i am not able to display the conent that is demoObj.

On clicking Fruits or Vegitables i need to show only the particualr object in it for example:

如果我点击蔬菜，那么我只需要显示 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 最初是 'Fruits'。

希望这会有所帮助！

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

How to filter an object in an array ion-segment in ionic 2

filter

segment

ionic2

angular