Почему не вызывается метод из другого метода в компоненте?

Question

[Артём]

Добрый день
В компоненте angular есть несколько методов.
При попытке вызвать один метод из другого возникает ошибка:

ERROR TypeError: Cannot read property 'someMethodName' of null

То же самое происходит со свойствами.
Ссылка на Plunker с кодом
Сейчас перейдя по ссылке воспроизводится ошибка вызова метода.
Для воспроизведения ошибки вызова свойства на строке 48 файла app.ts оставлен комментарий.
Подскажите пожалуйста, что я делаю не правильно?

Answer 1

[Mariik]

ТУт все дело в том, как Вы используете функции. Все дело в том, что Function Declaration, Function Exoression, Arrow Function по разному оббрабатывают контекст (this).

В примере Вяечслава срабатывает потому, что у стрелочной функции () =>
нет своего контекста, те функция срабатывает в контексте класса. А если Вы используете просто function(){} то у этой функции переданной в Event Loop (грубо говоря очередь асинхронного кода) this теряется и начинает ссылаться на глобальный обьект, те уже на window. Ну а у обьекта window как Вы понимаете действительно нет этих методов.

В общем тут конечно можно долго отвечать, но надеюсь основная идея ясна.

Comments

[Артём]

Да, теперь суть ясна.
Спасибо за ответ

Answer 2

[Вячеслав]

Не сильно хорош в js, но вывод примерно такой - когда вы передаете в качестве колбэка this.geoSuccess, то после вызова this.geoSuccess меняется контекст this, в котором уже нет ваших свойств и методов.
У меня заработало вот так:

//our root app component
import {Component, NgModule, OnInit} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  template: `
    <div>
      {{weatherData}}
    </div>
  `,
})
class App implements OnInit{
  weatherData: any;
  apiKey: string;
  
  constructor(private http: HttpClient){
    this.apiKey = 'cfcff50de820f9f3e1e5e655e5949edd';
  }

  /* при инициализации проверяем поддержку геолокации, 
  *  если есть поддержка - управление переходит в this.geoSuccess
  *  так же функции this.geoSuccess в качестве аргумента передается объект с данными о геолокации
  */
  ngOnInit(){
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(position => this.geoSuccess(position), this.geoError);
    }
  }

  /* 
  *  Ф-ция получает аргумент url и выполняет по нему get запрос
  */
  getCurrentWeather(url:string): Observable<any>{
    return this.http.get(url);
  }

  geoError(){
    console.log("Unable to retrieve your location");
  }
  
  /* Здесь составляется url для запроса погодных данных по местоположению;
  *  Так же вызывается ф-ция this.getCurrentWeather которой аргументом предаем url и осуществляем get запрос по данному url
  *  подписываемся на ф-цию и получив данные, пишем их в переменную weatherData
  */
  geoSuccess(position){
    let geoApiUrl = 'http://api.openweathermap.org/data/2.5/weather?lat='+ position.coords.latitude + '&lon=' + position.coords.longitude + '&APPID=' + this.apiKey;
    this.getCurrentWeather(geoApiUrl).subscribe(data => {
      this.weatherData = data;
    });
  }
}

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Надеюсь, более опытные товарищи объяснят подробнее:)

Comments

[Артём]

Спасибо огромное!
Не первый день пытался решить, а ваш ответ как манна небесная)
Использовал в качестве информации по геолокации статью.
Реализовывал свой код смотря на пример в абзаце "JavaScript Content". Но про свой промах с контекстом this даже не подумал.