Segment with dynamic content

Ionic Framework ionic-v3
1

I’m trying to figure out how I can use segment, but base the information off of dynamic content.

Example: I have a dataset with schedule information. I’m using virtual scroll to put headers for the hour breaks and that’s working great. Now I want to have a segment section at the top to allow the break out based on the day (based on the data provided), but it needs to be all generated dynamically through the dataset. (break out segments based on the field:‘dateStart’ and add switches in the virtual scroll accordingly)

I’ve found numerous examples of static content, but that won’t work. Sorry if this has been answered somewhere else, I’ve been searching for about a day now.

2

Please post code you have tried, what it does, and how that differs from your expectations. I’m sure that what you have written makes perfect sense to you, but “dynamic” and “static” are such loaded terms that it is really hard for anybody else to say much that will be useful to you.

3

I think I was trying to find and easy way and it just didn’t work. In the end I’m testing this code which works all but my segment buttons are not showing which one is selected (thoughts?).

Basically I’m just calling a function from the buttons in the segment to set new data for my virtualscroll. I tried to get the switch/case to work for segment, but virtualscroll does not like being parented by anything.

<ion-header>
    ...
  <ion-toolbar>
    <ion-segment [(ngModel)]="pdays" color="primary">
      <ion-segment-button *ngFor="let day of pdays;let i = index" value="{{i}}" (click)="segmentChanged(i)">
        {{day.date}}
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content padding>

    <ion-list [virtualScroll]="panelData" [headerFn]="panelHeaders">
      <ion-item-divider *virtualHeader="let header">
        <span style="font-weight: bolder">{{ header }}</span>
      </ion-item-divider>
      <ion-item *virtualItem="let item">
        <button ion-item item-start (click)="itemTapped({id:item.id})">
          <h2>{{item.subject}}</h2>
          <div>{{item.description}}</div>
        </button>
      </ion-item>
    </ion-list>


</ion-content>
4

If you land here with the same issues I have had, read the link below. There’s currently an issue with the v2 code base.

helmerdavila’s response at the end helped me fix my issues.