The ion segment changes only after clicking on the content entry

Question

Create a photo editing app using ionicv2 and the Adobe Creative SDK. I have successfully implemented a creative SDK.

After the CSDK successfully returns the URL of the edited file, I click on the page containing the segment along with the URL of the file.

The problem is on the second page, when I click on a segment, it does not switch. It will only switch if I click on the input inside the page.

I tried to do this without CSDK and it works without any problems.

My code is:

loadCamera(sourceType){ const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, sourceType: sourceType } this.camera.getPicture(options).then((imageData) => { // imageData is either a base64 encoded string or a file URI // If it base64: let base64Image = 'data:image/jpeg;base64,' + imageData; var thisModule = this; function success(newUrl) { console.log("Success Editing!", newUrl); thisModule.goToCreate(newUrl); } function error(error) { console.log("Error!", error); } /* Optional `options` object. See API guide for usage. */ var options = { outputType: CSDKImageEditor.OutputType.JPEG, quality: 70 }; /* Launch the Image Editor */ CSDKImageEditor.edit(success, error, base64Image, options); }, (err) => { // Handle error }); } /* Push a new page along with url */ goToCreate(url){ this.nav.push(SecondPage, {url: url}); } } 

Second page (contains segment component)

 section: string; url: string; constructor(...) { this.url = navParams.get('url'); console.log(this.url); //Working Perfectly this.section = "segment1"; } onSegmentChanged(segmentButton: SegmentButton) { // console.log('Segment changed to', segmentButton.value); } onSegmentSelected(segmentButton: SegmentButton) { // console.log('Segment selected', segmentButton.value); } 

Second page of HTML ( When I click on segment 2, it is not there, unless I click on the input inside segment 1 )

 <ion-content class="secondpage-content"> <ion-segment class="secondpage-segment" [(ngModel)]="section" (ionChange)="onSegmentChanged($event)"> <ion-segment-button value="segment1" (ionSelect)="onSegmentSelected($event)"> Segment 1 </ion-segment-button> <ion-segment-button value="segment2" (ionSelect)="onSegmentSelected($event)"> Segment 2 </ion-segment-button> <ion-segment-button value="segment3" (ionSelect)="onSegmentSelected($event)"> Segment 3 </ion-segment-button> </ion-segment> <div [ngSwitch]="section"> <div *ngSwitchCase="'segment1'" > <ion-item> <ion-label floating>Input</ion-label> <ion-input type="text" formControlName="input_example"></ion-input> </ion-item> </div> <div *ngSwitchCase="'segment2'" > </div> <div *ngSwitchCase="'segment3'" > </div> </div> </ion-content> 

In addition, console logs do not return any errors. Do you have any idea what is going on? I really think this is related to CSDK. Thanks you

Answer 1

I faced the same problem with the segment. I decided that it was:

 import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams, Segment, ModalController } from 'ionic-angular'; section: string; url: string; @ViewChild(Segment) private segment: Segment; constructor(...) { this.url = navParams.get('url'); console.log(this.url); //Working Perfectly this.section = "segment1"; setTimeout(() => { if (this.segment) { this.segment.ngAfterContentInit(); this.segment._inputUpdated(); this.onSegmentChanged(null) } }); } onSegmentChanged(segmentButton: SegmentButton) { // console.log('Segment changed to', segmentButton.value); } onSegmentSelected(segmentButton: SegmentButton) { // console.log('Segment selected', segmentButton.value); } 

Answer 2

I have the same problem. I don't have the same problem at my other job before, but for some unknown reason this just happens.

  this.segment.ngAfterContentInit(); 

will not help either one or the other.

And I found that this solution works for me.

1. add ionChange event handler in html

    <ion-segment [(ngModel)]="cat" (ionChange)=onSegmentChanged($event)> 

2. Add ChangeDetectorRef module and event handler in ts

    import { ChangeDetectorRef } from '@angular/core'; ... export class xxxPage { ... constructor( private cf: ChangeDetectorRef, ... } ... onSegmentChanged(obj) { this.cf.detectChanges(); } }