ngx-translate/core TranslateService 中的 getLangs() 没有数组操作

Question

我在一个 Angular (v13) 项目上工作，该项目使用 ngx-translate/core 作为 i18n。配置了多种语言（当前为 15 种）。我发现以下 非常奇怪 行为（TranslateService 被注入为 this.translateService）：

正在调用 this.translateService.getLangs() returns 一个包含预期的 15 种语言代码的数组。我可以记录这个值或者例如使用这些值配置下拉列表 select。
但是，我绝对不能对这个值进行任何数组操作，包括索引 [0]（表示 undefined）、.length（returns 0）或for-in 或 for-of。没有 ... 运算符来创建具有值的新数组或对象，没有 Object.assign([], langs)，没有 Array.from() - 它们只是 return 空数组。更不用说.map()、.forEach()等
typeof 表示对象，Array.isArray() 表示正确。

一些基本的示例代码：

ngOnInit(): void {
    console.log(
      this.translateService.getLangs(),
      this.translateService.getLangs().length,
      this.translateService.getLangs()[0],
      this.translateService.getLangs().includes('en'),
      this.translateService.getLangs().includes('aa')
    );
}

控制台显示：

[] 0 undefined false false

如果我展开 [] 它会显示 15 个代码（包括 'en'）和 length: 15.

问题

我读 ngx-translate documentation 错了吗（那是什么）？
我是不是因为不理解所以用错了？
这是 ngx-translate 中的错误吗？
这是 JavaScript 中的错误吗？
有什么解决方法吗？

Answer 1

感谢 Amer 的评论，为我指明了正确的方向。

出现问题是因为在通过 this.translateService.addLangs() 加载语言之前调用了 this.translateService.getLangs()。这些值是通过 HttpClient.get() request, which returns an Observable 获得的，并在收到结果后调用 addLangs()。（所以没有有趣的事情，只是错误的理解。）

简单的解决方案是仅在 Observable 的 complete 回调中对语言数组进行任何操作（或使用其他可用的同步机制之一).这是原始代码中的错误，现已修复。

浏览器 (Chrome) 记录 []（然后可以扩展到完整数组）对我来说是一个困惑。当数组在记录时可用时，它被记录为扩展，例如[ "ar", "en", .... ]。（当我点击控制台中的展开小部件时，数组显然已经同时加载，这使得它可以在展开时显示。）

我强烈建议不要通过超时进行同步，因为有人可能会错误地阅读 Amer 的评论，建议仅用于问题检测。在最终代码中应该始终使用其中一种同步方法（Promises、Observables、事件等）来实现异步进程之间的同步。

ngx-translate/core TranslateService 中的 getLangs() 没有数组操作

No array operations work on getLangs() from ngx-translate/core TranslateService

javascript

ngx-translate

问题