Ion Segment - ngSwitch - switch case only accepts string

Ionic Framework ionic-v3
1

No error showing the switching is not working.

`

     <div padding>
     <ion-segment  [(ngModel)]="homeSegment" (change)="onSegmentChanged($event)"     danger>
    <ion-segment-button *ngFor="#item of fetchCatch; #x = index" [value]="x" secondary>
    {{item.name}}
   </ion-segment-button>
   </ion-segment>
 </div>
 <div [ngSwitch]="homeSegment">
   <ion-list *ngFor="#itemx of fetchCatch; #i = index" *ngSwitchWhen="'i'">
     <ion-item *ngFor="#itemchild of itemx.children" (click)="categoryDetails(itemchild)">
       <h2>{{itemchild.name}}</h2>
     </ion-item>
   </ion-list>
  </div>`
1 Like
2

In this case *ngSwitchWhen="‘i’" is seek for ‘i’ char but not a 0,1,2 etc number
Try to bind 'i" as string value
maybe like this : can’t test now

*ngSwitchWhen="’"+i+"’"

1 Like
3

@pivalig parse errors

        EXCEPTION: Error: Uncaught (in promise): Template parse errors:
        Unexpected closing tag "ion-list" ("
            <h2>{{itemchild.name}}</h2>
           </ion-item>
        [ERROR ->]</ion-list>
       </div>
  <!--
"): CategoryPage@64:4
4

still not working, it will only work if i assign value manually.

5

Yes its like switch case. You must setup value manually

1 Like
6

@pivalig i want to try ngShow and ngIf instead of using the ngSwitch, since i want my segments to be dynamic.

7

ngswitch only accepts primitive strings: so below is work around for me, using ngshow and ngmodel and hidden

  <div><ion-segment [(ngModel)]="selectedSegment">
     <ion-segment-button *ngFor="#item of fetchCatch; #x = index"
          (click)="showSegment(item.id)"
          [value]="item.title">
                 {{item.name}}
           </ion-segment-button>
          </ion-segment>
      </div>
      <ion-content>
     <div> 
        <ion-list *ngFor="#itemx of fetchCatch; #i = index"
        [hidden]="hideSegment(selectedSegment,itemx.id)">
     <ion-item *ngFor="#itemchild of itemx.children" (click)="categoryDetails(itemchild)">
    <h2>{{itemchild.name}}</h2>
  </ion-item>
</ion-list>

           showSegment(i){
               this.selectedSegment = i;
           }

          hideSegment(a,b){
              if(a==b)
              return true;
         }