Question

  ngOnInit() {
          this.getPointsOfInterest(this.lat, this.lon).subscribe(
(response) => {this.data = response.json();
                this.lat = this.data.lat;
                this.lon = this.data.lon;
                  },
 (error) => console.log(error)
}

 ngAfterViewInit() {
    var src = { lat: this.lat, lng: this.lon }; 
    var map = L.map('map', { zoomControl: false }).setView(src, 14);
}

尚未在ngAfterViewInit this.lat和this.lon = undefined上传数据。

如何解决？

Answer 1

我认为您可以订阅观察请求的输出，然后执行您需要处理的数据

ngOnInit() {
    this.getData();
  }

  getData() {
    this.http.get('/app/data.json')
      .map((res:Response) => res.json())
      .subscribe(
        data => {
            this.data= data;
            // actions with data
        },
        err => console.error(err),
        () => console.log('done')
      );
  }

Answer 2

ngAfterViewInit无法按照您的想法运作。一旦初始化子组件和当前组件视图，Angular就会调用此方法。

此时，您的异步请求可能已完成，也可能未完成，并随数据一起返回。您无法假设它将始终在ngAfterViewInit

内准备就绪

您应该在订阅方法中使用您的数据。

有关详细信息，请查看此网址：Life cycle hooks

带有AfterViewInit的Angular2 Oninit

2 个答案: