Ionic-Angular 从 API 获取数据 - 未定义和控制台.log顺序

Question

大家，我有一个问题，我已经大约一周没有解决。我正在开发一个Ionic-Angular项目，我想从我的API获取数据。我在构造函数中执行 http 函数，但输出是在一切正常后出现的。当我在任何函数中使用结果 http 的变量时，它给出了未定义的。不知何故，我不明白我可以在页面中显示.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);
    });
  }
}

希望对您有所帮助！