отобразить значение карты, если ключ существует в angular 5 html - PullRequest
Новая
       20

отобразить значение карты, если ключ существует в angular 5 html

0 голосов
/ 30 апреля 2020

В файле component создается карта - 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 есть внешний для l oop, содержащий QuestionId и внутри карта (подмножество), чтобы проверить, существует ли QuestionId в нем, и отобразить значение из карты 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>

Я не могу проверить, существует ли ключ, и отобразить значение карты.

ОШИБКА: Ошибка типа: Не удается прочитать свойство 'tempDAMap' из неопределенного.

Пожалуйста, помогите мне.

1 Ответ

1 голос
/ 30 апреля 2020

Вместо: 

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

Вам необходимо использовать функции стрелок: 

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

В javascript, function - это ключевое слово, которое представляет действие, но оно также имеет поведение, аналогичное ключевому слову class , играющему роль конструктора класса, когда оно появляется после другого ключевого слова: new (например, new function(...) {...}). Первоначально это даже был способ создания объектов в javascript.

. Из-за этого, когда вы используете ключевое слово function, вы устанавливаете область действия, а this внутри нее ссылается на саму функцию как следствие поведения ее конструктора класса.

Этого можно избежать одним из двух способов:

  1. Старая школа: Сохраните внешнюю область во временной переменной, чтобы ее можно было использовать внутри функции (that - это общее имя переменной, используемое для этой задачи): 
const that = this;
this.savedData.forEach(function(assessData) {
 that.tempDAMap.set(assessData.qId, assessData.ansSelected);
});
Функции стрелок: Чтобы избежать захвата значения this внутри функции, вы можете избегать ключевого слова function при создании функции. Вместо этого вы можете использовать обозначение функции стрелки ( лямбда-функции в других языках программирования) для определения ваших функций. Делая это, ключевое слово this внутри тела функции стрелки будет ссылаться на внешнюю область видимости (некоторые люди любят говорить, что вы переводите область видимости в область действия функции ).
...