Ionic-Angular получает данные из API --undefined и console.log

Question

всем, у меня есть проблема, которую я не решил за неделю.Я разрабатываю проект Ionic-Angular и я хочу получить данные из моего API .Я выполняю функцию http в конструкторе, но вывод приходит после того, как все работает. Когда я использую переменную результата http в любой функции, она дает неопределенное значение. Почему-то я не понимаю, что могу отобразить в page.html с {{result}}.Я попробовал асинхронное обещание ожидания, но мне это не удалось.Я думаю, я не понял концепцию.

export class Tab1Page {

  apiRoot:string = "http://dengepvc.com/api.php";
  results;


  constructor(public http:HttpClient) {
    console.log("constructor");
    this.http.get(this.apiRoot).subscribe(data => {
      this.results = data["lat"];
      console.log(this.results);
    });
  }

  ngOnInit(){
    console.log("ngOnInit");
  }

  ngAfterContentInit(){
    console.log("ngAfterContentInit");
    // if i put here: console.log(this.results); it gives undefined.
  }
}

А вот мой порядок вывода на консоль;

constructor
ngOnInit
ngAfterContentInit
41.097792

Что мне делать - писать код и т. Д. Вы можете мне помочь?Я пытался в течение недели.

Answer 1

Привет, проблема в том, что вы делаете запрос AJAX (и это занимает некоторое время) .. он отвечает вам данными в то время, когда ваше приложение Ionic уже подключено к AfterContentInitEvent .. даже если вы делаете это вконструктор .. Итак, что вы можете сделать, это:

1 - Подпишитесь на ответ, где вам это нужно:

export class Tab1Page {

  apiRoot:string = "http://dengepvc.com/api.php";
  results;
  ajaxCall;

  constructor(public http:HttpClient) {
    console.log("constructor");
    this.ajaxCall = this.http.get(this.apiRoot);
    this.ajaxCall.subscribe(data => {
      this.results = data["lat"];
      console.log(this.results);
    });
  }

  ngOnInit(){
    console.log("ngOnInit");
  }

  ngAfterContentInit(){
    console.log("ngAfterContentInit");
    // subscribe again here for response if you really can't put all your logic only  in one subscribe


    this.ajaxCall.subscribe(data => {
      this.results = data["lat"];
      console.log(this.results);
    });
  }
}

Надеюсь, это поможет вам!