为什么我不能从 ngOnInit 方法设置数组实例变量？答案

【问题标题】：Why can't I set an array instance variable from the ngOnInit method?为什么我不能从 ngOnInit 方法设置数组实例变量？
【发布时间】：2021-04-09 21:05:06
【问题描述】：

为什么我不能通过ngOnInit 方法设置数组实例变量？

正如您在此屏幕截图中看到的，最后 2 行 console.log 尝试打印数组。第一个 console.log 打印包含其 1 项的数组。在.subscribe 方法之外的第二个console.log 打印一个空数组，就好像在完成.subscribe 方法的范围后保存的数组丢失了一样。

当我的应用加载时，我试图显示的列表是空的，因为数组是空的。

与这个问题相同，但没有一个答案能为我澄清： Initializing properties inside ngOnInit scope

【问题讨论】：

我认为这与在ngOnInit 中设置数组变量无关。随着 subscribe 方法的其余部分被切断，很难说，但看起来这是预期的行为。在执行subscribe 方法之外的console.log 时，可观察对象没有发出任何内容。因此，订阅方法尚未执行，数组为空。
我明白你的意思。在我的数据有任何价值之前，我被试图加载的组件绊倒了。所以，我需要弄清楚如何让我的组件等待。

标签： angular typescript

【解决方案1】：

知道回调函数不是在声明它们的地方执行是有帮助的。 Angular 在组件上下文之外管理 Observables。每次从 getChannelStatsById() 函数返回的 observable 发出一个值时，ngOnInit 中声明的 subscribe 函数中的回调函数将由 angular 运行。即使在 ngOnInit 早已完成之后。

当回调函数执行时，rowData 值将被设置并且 HTML 模板应该会自动更新。 *ngIf 检查也可用于在显示数据之前查看您是否有值

<ng-container *ngIf="rowData?.length > 0">
  {{ rowData }}
</ng-container>

我假设getChannelStatsById() 函数进行 HTTP 调用，在这种情况下，它返回一个 observable，它很可能只会在 HTTP 调用的成功响应时发出一个值。但是也可以将 http 调用配置为发出多个值。组件创建或生命周期钩子（如 ngOnInit 函数）中的执行流程不会因为 observable 发出值而停止。

另外，要记住的重要一点是可观察对象可以无限期地发出值，并且 Angular 可能会在组件被销毁后继续执行这些回调函数。在 HTML 模板中使用 async 管道将使生活变得轻松，因为 Angular 在 ngOnDestroy 生命周期挂钩中处理订阅或取消订阅。

【讨论】：

您的大部分回答只是告诉我我已经知道的东西，但是您在 ngIf 上使用 rowData.length > 0 的想法为我修复了它。谢谢你。我尝试设置一个布尔变量并使用 ngIf 但这对我不起作用。所以，感谢您的替代建议。非常感谢。

【解决方案2】：

该方法订阅一个 observable 并且本质上要求一个结果，然后它继续并打印一个最初为空的数组，然后返回结果并将结果推送给它，如下面的console.log .这就是异步 javascript 的工作原理。

【讨论】：

好的，这部分回答了我的问题。谢谢。