2

I have an Angular4 app which calls a service to post a record using my api.

When theAssignmentChanged value is true, it's going to send a text message. When false, it just skips over it.

In the following code, the console.log shows theAssignmentChagned flag as true, but the console.log inside the call to the service shows it as false.

I'm losing scope of this and I've looked at stack exchange and haven't found anything that's explaining why.

Why am I losing the scope of this inside my call to FService?

    console.log("Before : " + myForm.controls.theAssignmentChanged.value);
    this.FService.reqExec(formToPost, 'service', action)
    .then( data => {
      this.notify.success('Success','DB Update Successful!');
      console.log(" After : " + myForm.controls.theAssignmentChanged.value);

      if (myForm.controls.theAssignmentChanged.value) {
         this.messageService.sendMessage(telToText, 'Hi, the service has been changed, please review the changes.');
            }
            this.closeModal('services');
            resolve(data);
        })
        .catch(errorCode => {
            console.log(errorCode);
            reject(errorCode);
        });
      } else {
        this.closeModal('services');
        resolve(data);
      }
    });
  })

this is different than the javascript accessing this inside of then because I tried that and it didnt work, and also... when this function was not in a service, it worked fine. It only started happening when I took it out of the parent component and placed it inside the child service.

Thanks everyone... what was happening was a change in scope of this. And yes, this.notify worked, what was happening was an async condition occurred after the call to the procedure where the scope of this was turned to null because of a break in a follow on procedure. It just happened to be timed with right after this.notify and before the next line. I added async await and it works as normal now.

lunatixcoder
  • 31
  • 4
  • can you show what does myForm Object have ? – Vignesh Murugan Apr 17 '18 at 13:47
  • Possible duplicate of [javascript, promises, how to access variable this inside a then scope](https://stackoverflow.com/questions/32547735/javascript-promises-how-to-access-variable-this-inside-a-then-scope) – bugs Apr 17 '18 at 13:47
  • myForm is a FormBuilder object passed into the function. – lunatixcoder Apr 17 '18 at 13:48
  • this is the function header... postForm(myForm, action, row) {...} – lunatixcoder Apr 17 '18 at 13:49
  • It also doesnt really matter. I defined var self = this and tried using that, and it lost scope. I tried declaring a variable in the constructor and then referenced this.var in both places and it lost scope – lunatixcoder Apr 17 '18 at 13:50
  • And its not a duplicate of "javascript, promises, how to access variable this inside of then scope" because I tried that and it doesn't work either. – lunatixcoder Apr 17 '18 at 13:52
  • 4
    Not sure what you mean by losing scope, since `this.notify.success` is called and does not produce an error, `this` is what you expect it to be. If the value of `myForm.controls.theAssignmentChanged.value` changes maybe it is changed somewhere after you launch the promise ? Don't forget the part in `then` gets executed later – Titian Cernicova-Dragomir Apr 17 '18 at 13:53
  • Maybe try storing the value in a local variable and see if it still changes in the `then`, I except it will work as expected ... – Titian Cernicova-Dragomir Apr 17 '18 at 13:54
  • +1 to what @TitianCernicova-Dragomir is saying. You **are not losing the scope of this**. Most probably `myForm` is changing somewhere outside and that's why it produces different outputs. – Raul Rene Apr 17 '18 at 13:54
  • Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! – Bergi Apr 17 '18 at 14:03
  • Yup... that was it! Thanks Titian! – lunatixcoder Apr 17 '18 at 14:21

0 Answers0