Question

大家，我有一个问题，大约一个星期都没有解决。我正在开发一个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

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

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);
    });
  }
}

希望这对您有帮助！

Ionic-Angular从API获取数据-未定义和console.log命令

1 个答案: