如果密鑰存在於 angular 5 html 中，則顯示 map 值

Question

在component文件中創建了 map - 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) => {} )
  }
}

在 HTML 文件中，有一個包含QuestionId的外部 for 循環，並在 map（子集）內檢查QuestionId是否存在於其中並顯示來自 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>

我無法檢查密鑰是否存在並顯示 map 值。

錯誤：TypeError：無法讀取未定義的屬性“tempDAMap”。

請幫我。

Answer 1

代替：

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

您需要使用箭頭功能：

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(...) {...} ）。 最初這甚至是在 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.

可以通過以下兩種方式之一避免上述行為：

1. 老派：將外部 scope 保存在臨時變量中，以便可以在 function 內部使用（ that是用於此任務的通用變量名稱）：

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

2. 箭頭函數：為避免在 function 中捕獲this的含義，您可以在創建 function 時避免使用function關鍵字。 取而代之的是，您可以使用箭頭 function表示法（其他編程語言中的lambda 函數）來定義您的函數。 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 ).