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

问题：

我可以在离子段中显示Product_type，但我无法显示demoObj的conent。

点击水果或蔬菜时，我需要只显示其中的特定对象，例如：

如果我点击Vegitables，那么我只需要显示beetroot - Fuji和beens - Fuji这对Fruit来说也是如此。

我想我无法分配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>

最初，凯马特将成为“水果”。

希望这会有所帮助！

如何在离子2中过滤数组离子段中的对象

1 个答案: