NgAfterViewInit 未检测到对 NgOnInit 函数中的类变量所做的更改

如何解决NgAfterViewInit 未检测到对 NgOnInit 函数中的类变量所做的更改

我是 Angular 的新手，我不完全了解 Angular 生命周期的工作原理。

在我的 NgOnInit() 函数中，我调用了从 http 模块返回数据的异步数据服务。然后，它将我的类变量设置为等于返回的数据。

但是，我的 NgAfterViewInit() 没有接受这些更改。任何人都可以向我解释为什么以及如何解决这个问题？

我的组件：

export class LeafletMapComponent implements OnInit,AfterViewInit {

  data;

  constructor(private ps: PeopleService,private ngzone: ngzone) {}

  async ngOnInit(): Promise<void> {
    const res = await this.ps.httpGetData().toPromise();
    this.data = res;
    console.log(this.data); //WORKS,but why doesn't it work in the NgAfterInit function?...
  }

  ngAfterViewInit(): void { 
    console.log(this.data); //DOESN'T WORK (logs undefined),but doesn't this run after ngOnInit?
  }
}

我的服务：

...
export class PeopleService implements OnInit {
...
   constructor(private http: HttpClient) {}
   httpGetData() {
       return this.http.get<any>(this.URL);
   }
}

编辑：此组件的目的是渲染地图。该组件使用 NgAfterViewInit 是因为它呈现了一个传单地图 API（类似于谷歌地图）。但我也想将一些数据传递到 NgAfterViewInit 中，以便我可以在地图上动态呈现标记/图钉，并且这些数据是从我的服务 PeopleService 中检索的，该服务使用 {{1} } 模块获取数据。

提前致谢！