Ionic segment not staying active

Ionic Framework ionic-v3
1

I’m having some difficulties with ionic segment and I cannot figure out what’s wrong.

I have the following segment:

<ion-segment>
    <ion-segment-button *ngFor="let who of options['operatives']" [value]="who.value">
       {{who.label}}
 </ion-segment-button>

This displays the segment correctly, however here is the problem/interesting bit.

If I define the options.operatives locally is perfect. If the options.operatives is received from a server using a http call, it does work fine, BUT the segment does not stay active after being clicked.

I’m not sure how to explain better, if I feel the data array with data received from the server, the active state of the selected segment dissapears the second I release the mouse click. Copy & pasting the data returned by the http call into a local variable, everything works correctly.

Any ideas what can cause the problem?

Thanks.

2

I have implemented a manual SUPER UGLY hack for the moment, but I’m really keen to find out why the activated status does not stay on if the elements are loaded from external data.

In the html:

<ion-segment>
    <ion-segment-button *ngFor="let who of options['operatives']" [value]="who.value" (mouseup)="segmentChanged($event)">
       {{who.label}}
    </ion-segment-button>
</ion-segment>

then in the ts file I have:

segmentChanged(event) {
	var children = event.path[1].childNodes;
	for (var i = 0; i < children.length; i++) {
		try {
			children[i].classList.remove("activated");
		}
		catch (e) {}//Silent fail non-segment button 
	}
window.setTimeout(function(){event.path[0].classList.add("activated");},100);
}