0

Here is my below code

.html file

<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 file

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

Questions:

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:

if i click on Vegitables then i need to display only beetroot - Fuji and beens - Fuji this same should happen for Fruits.

i think i am not able to assign the value="demo.product_type" and *ngSwitchCase="'demo.product_type'" this both are not matching and that is way i am not able to display the names.

Mohan Gopi
  • 7,606
  • 17
  • 66
  • 117

1 Answers1

1

Try with: 

 <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 kmart would be 'Fruits'.

Hope this will help!

Sandeep Sharma
  • 1,855
  • 3
  • 19
  • 34
  • please check my updated question in .html part i have two type of segment button my fruts and vegitable are displaying correctly but my `All` segment button not displayed correctly any idea you got – Mohan Gopi Feb 27 '17 at 07:17