Create a dynamic segement

Ionic Framework ionic-v3
1

Hallo,

I want to create a dynamic segment.

This is my code:


<div padding>
              <ion-segment [(ngModel)]="preview">
                <ion-segment-button *ngFor="let segment of segments" value="{{segment.name}}" (click)="segmentChanged(segment.name)">
                  {{segment.name}}
                </ion-segment-button>
              </ion-segment>
            </div>
            <div *ngFor="let segment of segments" [ngSwitch]="preview">
              <ion-list *ngSwitchCase="segment.name">
                <ion-item>
                  {{segment.name}} content.....
                </ion-item>
              </ion-list>
            </div>

The problem is that value="{{segment.name}}" don’t change the preview variable when i click on the segement button.
The result is that the content of the segment is not displayed.

As workaround I add the click handler wich changes the preview variable and the content becomes visible.

But why does value="{{segment.name}}" not work?

Anny suggestion?

2

The issue lies outside of what you have posted. If I eliminate the (click) handler on the segment buttons, this code works as expected.

3

I tried it without the click handler first.

The problem is that the preview value dont change when the segment button is clicked.

4

Yes it does. I dropped that code directly into a sandbox project and the preview value changed and the {{segment.name}} changed with it. Whatever is going on is outside the scope of what you have posted here.

1 Like
5

Hmmm.

I start with an empty segment array. Could this be the problem.

I post the rest of my code later.

6

@rapropos Thank you for your Support.

If the Segment Array has some initials items the init items works fine.
When I add a new item to my Segment Array the new item wont work.

I think the Problem is that it is not possible to add dynamicaly a case to the switchcase Statement.

For my preview function the click handler is a good work around.

7

@rapropos

When I use the ionChange Event like in the docs is this than the right way to handle it?

I don’t know if event:any is right? Or is there a special type for Events?

mySegment_changed(event: any){
	console.log("mySegment_changed ->" + event._value);
	// Add your code here
}
8

I haven’t found it to be consistent, and it’s not particularly well-documented. Oftentimes it is the component that has triggered the event.

9

I don’t know if you have already solved this problem but I came across with it today. And I found that you may use the element with some mistakes. To asign value attribute in a ngFor loop, you should write like [value]="segment.name" .