Javascript 处理ES6中未定义的变量或属性

在我的特殊情况下，我使用Angular和Firebase Firestore，然而，这个问题也可能与Typescript和纯Javascript有关

我的应用程序完全取决于我从Firestore获取的数据。 我将生成一个最小的、可复制的代码示例，如下所示

TS:

HTML:

---

对于每个属性都不需要额外的ts代码的情况，有多种解决方案

在属性前面使用问号

？

检查它是否存在，然后输出将为空

{{ user?.name }}

对于嵌套属性，其值相同

{{ user?.name?.first }}

使用或运算符

|

，然后您可以决定默认值

{{ user?.name || 'Default name' }}

---

或者您编写一个管道，这将是一个过度使用的解决方案，与第二个解决方案类似。

我将在HTML中这样做：

{{user.name | |“N/a”}

。这样，情况就可以在适当的背景下得到处理。例如，如果您在某种API调用中使用该对象，那么在“name”属性中找到“No value found”可能不是您想要的。您可以使用这些默认值设置一个

user

对象，然后将其与订阅返回的

用户合并。在html中，您可以这样使用：Name:{{user？.Name}
Age:{{user？.Age}

{{ user?.name }}

{{ user?.name?.first }}

{{ user?.name || 'Default name' }}