Weird behavior with ion-segment

Ionic Framework ionic-v3
1

Hi,

I have a list of 3 radio-group list and when I click on one of them, there is a ion-segment that shows up like this one:

image

Then, I save the data and when I come back, I retrieve my data to be able to activate the “Position” radio-button and the “A-Z” from my ion-segment. The radio button is selected, but not the ion-segment. This is the first problem even if I know the data is saved properly.

Then, if I click in the ion-segment, it is now a really light blue instead of the blue just above:

image

It looks like the blue when you hover the ion-segment.

Anyone already seen that before?

Thanks

2

What is the code used to create this ion-segment?

3

Here is the HTML:

<ion-list radio-group [(ngModel)]="orderBy.orderBy">   
  <!-- Order by Position -->
  <ion-item>
    <ion-label>Position</ion-label>
    <ion-radio value="position"></ion-radio>
  </ion-item>

  <ion-item *ngIf="orderBy.orderBy === 'position'">
  <!--<ion-item [hidden]="orderBy.orderBy !== 'position'">-->
    <div padding>
      <ion-segment [(ngModel)]="orderBy.positionOrder">
        <ion-segment-button value="asc">A - Z</ion-segment-button>
        <ion-segment-button value="desc">Z - A</ion-segment-button>
      </ion-segment>
    </div>
  </ion-item>    
</ion-list>

Here is the TS

public orderBy: OrderByClass;

constructor(private _navParams: NavParams,
                 private _storage: Storage, 
                 public translate: TranslateService, 
                 private _viewCtrl: ViewController) {

  this.orderBy = JSON.parse(_navParams.get('orderBy'));
}
4

For now, just forget it. I reboot my computer and now it seems to work fine. Will see how long…

thanks

1 Like