typescript - Angular 5 this indefinido dentro de array.filter

Aqui está o código que eu estava tentando

search(){
   this.toDisplay = this.products.filter(function(x){
      return this.checkCondition(x.price, condition);
   }
}

É uma condição complicada, como maior que, intervalo, máximo com base no número da condição; esta função decide se a condição é atendida ou não e retorna verdadeiro ou falso.

checkCondition(item, condition){
  switch(conditoin){
    case 1:  ... brea;
    case 2:  ... brea;
    case 3:  ... brea;

  }
  return status;
}

O problema é que quando eu uso this.checkCondition dentro do filtro, sempre lança checkCondition propriedade de indefinido, o que significa que this está indefinido.

Eu verifiquei que this está sempre indefinido, então como chamar uma função dentro do filter?

Resposta #1

Use uma função arrow para que this seja automaticamente vinculado corretamente. Como você marcou TypeScript, você pode transpilar as funções arrow se planeja dar suporte a navegadores que só suportam ES5 ou versões anteriores:

search(){
   this.toDisplay = this.products.filter(x => this.checkCondition(x.price, condition));
}

Se você não quiser usar funções arrow, você pode capturar o this:

search(){
   var selfRef = this;
   this.toDisplay = this.products.filter(function(x) {
      return selfRef.checkCondition(x.price, condition);
   });
}

Outro método é usar bind:

search(){
   this.toDisplay = this.products.filter(function(x) {
      return selfRef.checkCondition(x.price, condition);
   }.bind(this));
}

Resposta #2

Outra abordagem é atribuir 'this' a uma variável local fora da chamada do filtro (as pessoas costumam usar 'that' ou 'self' como identificador para esse propósito).

Exemplo :

search(){
   var that = this;
   this.toDisplay = this.products.filter(function(x){
      return that.checkCondition(x.price, condition);
   }
}