Segment ion

my segment

<div padding class="segment">
  <ion-segment [(ngModel)]="formations-segment">
    <ion-segment-button  value="toutes" (ionSelect) ="getFormations()" >
    <ion-segment-button   value="categorie"  (ionSelect) ="getCategories()">
      Par Catégorie 
<div [ngSwitch]="formations-segment">

   <ion-list *ngSwitchCase="'categorie'">
    <button  ion-item *ngFor="let categorie of categories">
      <div id="liste-formations"> 
          <ion-label > {{categorie.nom}}</ion-label>

  <ion-list *ngSwitchCase="'toutes'">

   <button  ion-item  *ngFor="let formation of formations">
     <div id="liste-categorie"> 


that not work ???

I don’t know, you have to tell us if this works or not. I don’t even know what could “not work” here as I see only a lot of code without any explanation, error message or any other context.

Yes it does not work, normally getFormations () returns a list of formations. But when I click (toutes) I have no display

Is there any difference if you use *ngIf instead of ngSwitch?

Not sure if they’re relevant, but noticed a few things.

  1. Could creating a div element on a list of *ngFor’s be a possible cause?

  2. If not, your first list, ‘categorie’ has an ion-label holding each categorie.nom.
    your second list has no ion-label holding formation.nom.
    I personally have no idea if it matters, just an observation. But, if i’m not wrong, an ionic list of ‘button ion-item’ will
    create a label for each item automatically. It’s possible you have a label inside of a label.

  3. your two div id’s are name after their opposite *ngFor’s. categorie of categories has div id=“formations”. formation of formations has div id=“categorie”. If not on its’ own, maybe that fact combined with some scss coding you did could be causing it?

1 Like

Thanks to @jaydz for making me notice the id properties. Those have to be unique document-wide, so they cannot be present on things inside a loop. Once the loop has more than one element, your document will become invalid.

very welcome rapropos. My help was indirect, but glad you could use it.


and it works