ngSwitchCase problem for dynamic data


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

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.

By any chance are you using lazy page loading?

no brother. I am using it after modal loading.

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

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.

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

Continuing the discussion from ngSwitchCase problem for dynamic data:

Can you tell? how the dynamic segment are created.

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)">

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