используя это ключевое слово в угловых во вложенных функциях

Question

Привет, я бы знал, как я могу использовать переменные компонента во вложенной функции.

Вот пример:

export class AppComponent implements OnInit {
  name = ['Angular 6','Angular5','Angular4','Angular2'];
  isexist: string[]=[];

ifExist(text){
  var that= this;
  console.log("first ",this);
  var test="test";
  let exist= this.name.map(function (elm){
    if(elm==text) {
      console.log(this);
      this.isexist.push(elm); // works with that.isexist.push(elm); 
      }
      })
}
ngOnInit() {
  this.ifExist('Angular 6');

}

Вот что я получаю в браузере dev dev

first  AppComponent {name: Array(4), namev: "helo", isexist: Array(1)};
second undefined

У меня есть несколько вопросов. Как я могу получить доступ к isexist без использования стрелки?почему второй this не содержит test элемента?

Answer 1

Причина, по которой вы не можете получить доступ к ifExists без использования функций со стрелками, заключается в том, что this в функции со стрелкой имеет то же значение, что и контекст, в котором функция со стрелкой была создана .

this в нормальной анонимной функции, однако, имеет значение контекста, в котором нормальная функция вызывается из (В вашем случае контекст и область действия нормальной функции находятся только внутри ifExists метод.

Answer 2

Нет никакой причины зацикливаться, поскольку вы проверяете, содержит ли массив элемент.Вы даже не вернетесь с map().Другие ответы уже объясняют вашу проблему с this, и вот как вы должны реорганизовать свой код (переписал на простой js, чтобы он работал в сниппете, но вы поняли):

class Foo {
  constructor() {
     this.name = ['Angular 6','Angular5','Angular4','Angular2'];
     this.isexist = [];
  }
  
  ifExist(text) {
    if (this.name.includes(text)) this.isexist.push(text);
  }
  
  runner() {
    this.ifExist('Angular 6');
    console.log(this.isexist);
  }
}


new Foo().runner()

Answer 3

попробуйте лямбда здесь:

ifExist(text){
  var that= this;
  console.log("first ",this);
  var test="test";
  let exist= this.name.map((elm)=>{
    if(elm==text) {
      console.log(this);
      this.isexist.push(elm); // works with that.isexist.push(elm); 
      }
      })
}