ngSwitchCase problem for dynamic data

Ionic Framework ionic-v3
1

html

<div [ngSwitch]="color">
	<ion-list *ngFor="let colorList of colorData" > 
		<ion-item *ngSwitchCase="'{{colorList.colorName}}'" >
			
			<ion-label>{{colorList.colorName}}</ion-label>
		</ion-item>
	</ion-list>
</div>

error show

Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘*ngSwitchCase’ since it isn’t a known property of ‘ion-item’.

May i use *ngSwitchCase="'{{colorList.color_name}}'" for dynamic data? Am i right or wrong. Please anybody help. Thanks in advanced.

2

By any chance are you using lazy page loading?

3

no brother. I am using it after modal loading.

4

Hey @ismailcse11, it’s been a while since you asked so I hope you were able to solve or work around your issue. But if you haven’t – or for anyone else who ran into this like I did – you need to have the ngFor wrapping the ngSwitch and ngSwitchCase, like this:

<div *ngFor="let option of options">
  <div [ngSwitch]="which">
    <div *ngSwitchCase="option">
      {{option}}
    </div>
  </div>
</div>

I know this seems rather counterintuitive, and it can make things like lists and items a little strange to structure, but it gets around the error.

5

I solved this a long day ago. Thanks for your reply.

6

Continuing the discussion from ngSwitchCase problem for dynamic data:

Can you tell? how the dynamic segment are created.

7

@pooja14
You can try this instead of ngSwitchCase

<ion-segment [(ngModel)]="selectedSegment"  (ionChange)="onSegmentChanged($event)" *ngIf="productcategory">
    <ion-segment-button value="{{segment.catid}}" *ngFor="let segment of productcategory" (ionChange)="onSegmentChanged($event)">
        {{segment.catname}}
    </ion-segment-button>
  </ion-segment>
8

hey can you provide .ts file and .html file both code? so i can better understood.