Angular ngOnInit未等待构造函数服务调用

我正在对组件的构造函数进行API调用

apiResult = [];
constructor(
        private router: Router,
        private applicationServices: ApplicationService,
        private location: Location,
    ) {
        this.applicationServices.getAppConfig().subscribe(
           result => {
              this.apiResult = result;
           }

然后在ngOnInit上，我想用这个信息示例：

ngOnInit() {
  console.log('Selected App');
  console.log(this.apiResult );
}

然而，它是在构造函数上的服务完成之前读取ngOnInit的。因此，“apireult”的结果是未定义的

我有什么选择？最好的方法是什么？如果可能的话，你可以举个例子

---

提前感谢。

在开发Angular应用程序时，我建议保持构造函数干净，只管理依赖关系

我建议您这样做：

导出类Lol{
apiResult=[]；
建造师(
专用路由器：路由器，
专用应用程序服务：应用程序服务，
私人场所：场所，
) { }
恩戈尼尼特（）{
这是applicationServices
.getAppConfig（）
.烟斗(
点击（结果=>{
console.log（'Selected App'）；
控制台日志（结果）；
})
)
.订阅（结果=>{
this.apisresult=结果；
})
}
}

在

ngOnInit（）

中调用服务，然后在订阅之前点击

结果，这是一个
rxjs
操作符，用于执行副作用和
控制台。日志就是这样

更新

我建议不要手动订阅Observable，最好使用
async
pipe。这样，您将避免可能的内存泄漏，并允许angular为您管理订阅

这将是组件文件：

导出类组件{
apiResult$：可观察的；
建造师(
专用路由器：路由器，
专用应用程序服务：应用程序服务，
私人地点：地点
) {}
恩戈尼尼特（）{
this.apireult$=this.applicationServices.getAppConfig（）.pipe(
轻触（（结果）=>{
console.log（“所选应用程序”）；
控制台日志（结果）；
})
);
}
}

这就是模板：


{{apireult}json}
实际原因是注入了依赖项（构造函数的参数），并实例化了组件本身。在将此组件添加到DOM期间，根据某些情况执行各种生命周期函数

另一件事是，
.getAppConfig（）
返回一个
可观察的
，这是一个异步函数。这里，函数
.getAppConfig（）
将在
构造函数中执行，但同时也会执行ngOnInit（）。很明显，
this.apireult
此时将为空，因为尚未完成对该数组的赋值

因此，解决方案可以是：

apiResult = [];
constructor(
        private router: Router,
        private applicationServices: ApplicationService,
        private location: Location,
    ) {   }

ngOnInit(){
 this.applicationServices.getAppConfig()
       .subscribe(result => {
              this.apiResult = result;
              consoloe.log(this.apiResult);
       });
}

正如所有人所建议的，保持构造函数定义干净，以获得最佳实践

您可以阅读异步函数和普通函数的区别。而且，最重要的是，可以观察到
 根据设计，调用和订阅是异步的。在退出构造函数之前，构造函数不会阻塞并等待调用完成。在实现异步调用时，无论它们是否在构造函数中，都必须记住这一点。如果你订阅了ngOnInit，然后试图利用NgoAfterViewChecked或其他东西的结果，你可能会遇到类似的问题。我让事情变得复杂了。。。做了您所做的，并添加了“因此它仅在从API获得结果时渲染。@Fábio我看到您有非常常见的渲染用例，请检查更新的示例，该示例不直接订阅observable，而是让Angular处理订阅。