Javascript 在定义环境变量之前读取环境变量

我正在使用一个环境变量，以便能够从JSON中读取一些内容并在HTML中显示。我的问题是，我的HTML试图在.ts中定义环境变量之前读取它，因此我得到了一个错误

我目前正在

ngOnit（）

中定义变量，但这给了我一个错误。我正在使用

httpclient

来读取JSON（从服务器），显然，在

httpclient

获得数据之前，变量正在

HTML

中读取

HTML

<p>Player One is: {{ id.playerone }} </p>

JSON

{  
   "playerone":"ajf806",
   "playertwo":"hof934"
}

我得到的

播放器一的预期输出是：ajf806

，但我在控制台中也得到一个错误，即：

错误类型错误：无法读取未定义的属性“0”

---

它确实工作，我得到了输出，但我不想在控制台中出现错误。有没有办法延迟HTML读取环境变量，直到JSON被读取为止？

如下更改变量：

id: any;

<p>Player One is: {{ id?.playerone }} </p>

<ng-conatiner *ngIf="(id$ | async) as id">
 <p>Player One is: {{ id.playerone }} </p>
</ng-container>

还可以按以下方式更改模板：

id: any;

<p>Player One is: {{ id?.playerone }} </p>

<ng-conatiner *ngIf="(id$ | async) as id">
 <p>Player One is: {{ id.playerone }} </p>
</ng-container>

---

注意-您没有订阅组件中的可观察对象

async

pipe负责订阅管理[即订阅/取消订阅。]。

您确定这不是因为您已将id声明为数组，而是从服务器返回的不是数组吗？问题中的错误通常发生在尝试为空数组编制索引时…（我指的是未初始化的空数组）@StephenByrne，因为我没有将其声明为数组，所以

id:any。我得到了这个错误：
错误类型错误：无法读取未定义的属性“playerne”
。最简单的方法是在标记上添加一个*ngIf=“id”，或者您可以查看Angular中的预取数据（路由解析器）是如何工作的。您也可以使用@user2216584所述的安全运算符。@Dritz只使用
id而不是
id:any=[]
并使用安全导航操作符
玩家一是：{{id？.playerone}
为什么你甚至在没有得到它的时候显示值。您可以设置*ngIf=“id”，当您得到您的值时，您将在dom中呈现该p。太棒了！这样就消除了错误。您能否确认这是一个正确的解决方案，而不仅仅是一个“粗略”的解决方案来消除错误？感谢you@Dritz按照规定使用安全导航操作员，并仅使用
id而不是
id:any=[]另一种方法是在加载组件之前使用resolve加载数据，但仍然使用安全的导航操作符needed@Dritz请参阅我更新的答案，以获得更好的版本。