Parent properties cannot be access(undefine) after modal.onDidDismiss


#1

Hi Everyone,

I’m quite new to Ionic 2 development and would like your help. Anyone would know how to save the parameter to parent’s properties after onDidDismiss() from a modal page. The problem I couldn’t get to access my Parent’s page properties after the event is triggered and while debugging, its shows me undefine error always when i am using this keyword to access them. I have noticed also that during debugging during onDidDismiss() event, this is pointing to my Modal page instead of my Parent page.

My goal is to pass user’s Input from Modal’s page to my Parent’s page and store the input to the parent properties.

Here is my codes:

Parent’s Page HTML:

<ion-scroll scrollY="true" style="height:50vh;">
        <ion-list *ngFor="let taskItem of task.TaskItems;">
            <ion-item text-wrap >
                <ion-label>
                    <p> {{ taskItem.Description }} </p>
                    <button *ngIf="taskItem.CalibrationRequired" ion-button color="secondary" (click)="goToCalibration(taskItem.Calibration, taskItem.SeqNo)">Calibration Result</button>
                </ion-label>
                <ion-checkbox [(ngModel)]="taskItem.Completed">{{ taskItem.Completed }}</ion-checkbox>
            </ion-item>
            <ion-item *ngIf="taskItem.Completed">
                <ion-input [(ngModel)]="taskItem.Remarks"></ion-input>
            </ion-item>
        </ion-list>
    </ion-scroll>

Parent’s Page Method:

public goToCalibration(calibration, seqNo) {
        this.selectedCalibrationTask = seqNo;
         let modal = this.modalCtrl.create(ModalCalibrationPage, { "calibration": calibration });
        modal.onDidDismiss(data => {
            for (var i = 1; i < this.task.TaskItems.length; i++) {
                if (this.task.TaskItems[i].SeqNo == this.selectedCalibrationTask) {
                    if (data != null) {
                        this.task.TaskItems[i].Calibration = data;
                    }

                    break;
                }
            }
        });
        modal.present();
    }

Modal’s Page:

export class ModalCalibrationPage {
    public calibration: any;

    public constructor(public viewCtrl: ViewController, private navParams: NavParams) {
        if (this.navParams.get("calibration") != null) {
            this.calibration = this.navParams.get("calibration");
        }
        else {
            this.calibration = {
                ...
                MeasuredVoltage: '',
                StandardType: '',
                UOM: '',
                InstrumentAccuracy: '',
                InstrumentCalibrated: false,
                Remarks: ''
                ...
            };
        }
    }


    public saveCalibration() {
        this.viewCtrl.dismiss(this.calibration);
    }

}