Segment ion

Ionic Framework ionic-v3
1

my segment

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

<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>
      </div>
  </button>
  </ion-list>

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

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

</div>

that not work ???

2

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.

3

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

4

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

5

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?

6

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.

7

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

8

by

and it works