properties are undefined inside of promises

Question

This is my typescript function where I'm trying to use a promise:

public onEditSubmit() {
    const model = this._sharedService.createUpdateModel(
        null,
        this.editForm
    ) as LOG;

    model.fileId = this.fileId;
    model.startEffectiveDate = Shared.toISODate(model.startEffectiveDate);
    model.endEffectiveDate = Shared.toISODate(model.endEffectiveDate);



    let deferredExecutionCheck = new Promise((resolve, reject) => {
        this._updateService
            .getAllById(this.selectedItem.LogId)
            .subscribe(
                r => {
                    this.records = r;

                    this.records.forEach(element => {
                        if (
                            element.StatusId === 1 ||
                            element.StatusId === 2 ||
                            element.StatusId === 4 ||
                            element.StatusId === 5
                        ) {
                            this._notificationService.showErrorMessage(
                                `MESSAGE GOES HERE`,
                                "IN PROGRESS"
                            );

                            reject("In Progress");
                        }
                    });
                    resolve("Not In Progress");
                },
                e => {
                    throw e;
                }
            );
        console.log("finished");
    });

    let originalEditSubmit = function(result: any) {
        if (this.editMode === "Add") {
            this.add(model);
        } else {
            if (
                (model.wfStatusId === Status.Review ||
                    model.wfStatusId === Status.LoadFailed ||
                    model.wfStatusId === Status.Completed) &&
                model.eventStatusId === eStatus.Cancelled
            ) {
                this._confirmDlg.closable = false;
                this._confSvc.confirm({
                    accept: () => {
                        model.cancelRcdb = true;
                        this.update(model);
                    },
                    message: "Cancel RCdB Dataset?",
                    reject: () => {
                        model.cancelRcdb = false;
                        this.update(model);
                    }
                });
            } else {
                this.update(model);
            }
        }
    };

    deferredExecutionCheck.then(
        result => originalEditSubmit(result),
        error => console.log("error", error)
    );
}

Error: Uncaught (in promise): TypeError: Cannot read property 'editMode' of undefined TypeError: Cannot read property 'editMode' of undefined at originalEditSubmit

I moved the this.fileId property outside of the originalEditSumbmit method and it now is being read. But now it seems like this.editMode is now having the same issue.

Can I not have these properties inside of my promises like this?

Possible duplicate of [Javascript "this" pointer within nested function](https://stackoverflow.com/questions/9644044/javascript-this-pointer-within-nested-function) — str, Jun 12 '19 at 20:53
@str - is it because of this answer (in the code that was commented): // In an arrow function, the 'this' pointer is interpreted lexically, If so, what does "lexically" mean? — webdad3, Jun 12 '19 at 21:44
https://stackoverflow.com/questions/1047454/what-is-lexical-scope — str, Jun 13 '19 at 06:57

score 1 · Accepted Answer · answered Jun 12 '19 at 20:54

1

change

let originalEditSubmit = function(result: any) {

to

let originalEditSubmit = (result: any) => {

answered Jun 12 '19 at 20:54

Reza

18,865
13
88
163

That worked. Can you tell me why? What was I doing incorrectly? Or if you could point me to a reference to read up on, that would be great! – webdad3 Jun 12 '19 at 21:00
@webdad3 it's about interpreting `this` , when using function style `this` refers to scope of function – Reza Jun 13 '19 at 02:06

properties are undefined inside of promises

1 Answers1