时间戳

首页 > 解决方案 > Ionic-Angular 从 API --undefined 和 console.log 顺序获取数据

angular - Ionic-Angular 从 API --undefined 和 console.log 顺序获取数据

问题描述

各位，我有一个问题我已经一个星期没解决了。我正在开发一个 Ionic-Angular 项目，我想从我的 API 获取数据。我在构造函数中执行 http 函数，但输出是在一切正常之后。当我在任何函数中使用 http 结果变量时，它给出了未定义的结果。不知何故，我不明白我可以使用 {{result}} 在 page.html 中显示。我尝试了异步 - 等待 - 承诺，但我没有成功。我想我没有得到这个概念。

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

我该怎么办 - 编写代码等。你能帮我吗？我已经尝试了一个星期。

标签： angularionic-framework

解决方案

嗨，问题是您正在执行 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);
    });
  }
}

希望这对你有帮助！

推荐阅读