display the map value if key exists in angular 5 html

Question

In the component file a map is created - tempDAMap :

import 'rxjs/add/operator/map';
export class AComponent implements OnInit {
  tempDAMap = new Map();
    /** Onchange */
  selectedName(pName: any): void {
    this.service.getPAData(pName).subscribe( (data) => {
      if (data.length > 0 && data != '' && data != null) {
    this.savedData = data;
    this.tempDataStatus = true;
    this.savedData.forEach(function(assessData) {
      this.tempDAMap.set(assessData.qId, assessData.ansSelected);
    })
      }
      else {
        this.tempDataStatus = false;
      }
    },
    (error) => {} )
  }
}

In the HTML file, there is a outer for loop containing QuestionId and inside a map (subset) to check if the QuestionId exists in it and display the value from map tempDAMap .

    <div *ngFor="let QA of Questions">
      <div>  <label> {{ques.desc}} </label>
        <div *ngIf="tempDataStatus === true">
 /** Check if tempDAMap contains Id (from Questions- outer for loop)*/
        <div *ngIf="tempDAMap.has(ques.questionId)"> 
          <p> {{ }} </p>  /** display the map value  */
        </div>
        </div>
      </div>
    </div>

I'm unable to check if the key exists and display the map value.

ERROR: TypeError: Cannot read property 'tempDAMap' of undefined.

Please help me.

Answer 1

Instead of:

this.savedData.forEach(function(assessData) {
 this.tempDAMap.set(assessData.qId, assessData.ansSelected);
});

You need to use arrow functions:

this.savedData.forEach((assessData) => {
  this.tempDAMap.set(assessData.qId, assessData.ansSelected);
});

In javascript, function is a keyword that represents an action but it also has similar behavior to the class keyword , playing the role of a class constructor when it appears after another keyword: new (eg. new function(...) {...} ). Originally this even was the way of instantiating objects in javascript.

Because of that, when you use the function keyword you set a scope, and the this inside it refers to the function itself, as a consequence of its class constructor behavior.

The above behavior can be avoided by one of two ways:

1. Old school: Save the outside scope in a temporary variable so it can be used inside of the function ( that is a common variable name used for this task):

const that = this;
this.savedData.forEach(function(assessData) {
 that.tempDAMap.set(assessData.qId, assessData.ansSelected);
});

2. Arrow functions: To avoid trapping the meaning of this inside the function, you can avoid the function keyword when creating a function. Instead of that, you can use the arrow function notation ( lambda functions in other programming languages) to define your functions. By doing that the this keyword inside the body of the arrow function will refer to the outside scope (some people like to say that you bring the outside scope to the function scope ).