Why I can't call a class method from the inside of this callback function? ERROR TypeError: this is undefined

Question

I am working on an Angular application using TypeScript and I have the following problem.

Into a TypeScript class I have this method:

findArtistBidsAppliedByCurrentWall(bid):Observable<Bid[]> {
  console.log("findArtistBidsAppliedByCurrentWall() START")

  let data:Array<any> = null;
  return this.db.collection('bids',
      ref=> ref.where("wallId", "==", bid.wallId))
      .get()
      .pipe(
          map(snaps => {
             snaps.forEach(function(doc) {
             console.log("BLA: ", doc.id, " => ", doc.data());
             this.myClassMethod();

             return doc.data;
           });

              return null;
          })
          
          
      )
  }

So as you can see into the previous code I am calling a forEach() method on the snaps object.

This method take a callback funtion as paramether. Into this callback function I am trying to execute another method (myCassMethod()) defined directly into my instance, in this way:

this.myClassMethod();

Doing in this way it isn't work because I am obtaining the following error messate into the console:

ERROR TypeError: this is undefined
    findArtistBidsAppliedByCurrentWall notifications.service.ts:187
    node_modules vendor.js:159712
    node_modules vendor.js:145978
    node_modules vendor.js:145609
    node_modules vendor.js:145609
    node_modules vendor.js:145527
    node_modules vendor.js:145977
    node_modules vendor.js:159711
    findArtistBidsAppliedByCurrentWall notifications.service.ts:184
    RxJS 4
    Angular 6
    RxJS 3
    Angular 16
    RxJS 4
    schedule Angular
    RxJS 4
    Angular 20
    node_modules vendor.js:157356
    node_modules NextJS
    node_modules vendor.js:149711
    node_modules vendor.js:149679
    Ur index.cjs.js:5711
    Us index.cjs.js:11891
    step tslib.es6.js:100
    verb tslib.es6.js:81
    fulfilled tslib.es6.js:71
    Angular 13

It seems that form whthin this callback function it can't see the this as instance reference.

How can I solve this problem and correctly call my myCassMethod() method§?

`this` in JavaScript doesn't refer to a class of the instance, it usually refers to the instance itself. See https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — Teemu, Nov 28 '20 at 11:13
@Teemu yes I mean the instance itself...but from within this callback function I can't use it — AndreaNobili, Nov 28 '20 at 11:15
[`Array.prototype.forEach(callback[, thisArg])`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach): _"If a `thisArg` parameter is provided to `forEach()`, it will be used as callback's `this` value. The `thisArg` value ultimately observable by callback is **determined according to [the usual rules for determining the `this` seen by a function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)**."_ — Andreas, Nov 28 '20 at 11:16

score 1 · Accepted Answer · answered Nov 28 '20 at 11:15

1

You can try changing snaps.forEach(function(doc) { to snaps.forEach( (doc) => { but I'm not totally sure it will work.

Or by setting

findArtistBidsAppliedByCurrentWall(bid):Observable<Bid[]> {
   const that = this;

and using that. And this one is guarantee to work.

answered Nov 28 '20 at 11:15

farvilain

2,326
1
10
23

Trying using the that option but now it seems doesn't enter into the method...it give me no error but it is not executing the method code that print a log – AndreaNobili Nov 28 '20 at 11:27

Why I can't call a class method from the inside of this callback function? ERROR TypeError: this is undefined

1 Answers1