Javascript 以模板角度显示数据（对象）的最佳方式5

在这种情况下，以模板Angular5显示数据的最佳方式是什么：

我从Firestore（=firebase）加载数据，如下所示：

}

Firestore的响应是：

[{“电子邮件”：john@gmail.com“，”姓名“：”约翰“}]

1°模板中显示名称的第一个解决方案：

<span>{{testMembers[0]?.name}}</span>

最好的解决方案是什么，或者可能还有另一个解决方案。非常感谢。

---

}由于服务响应是异步的，因此在访问对象之前，您应该添加

if

条件，如下所示

this.user.subscribe((auth) => {
      if (auth) {
            this.itemService.getTestMembers(auth.uid).subscribe(testMembers => {
            this.testMembers = testMembers;
            if(testMembers.length > 0 ) {//////////add this
                    this.userName = (JSON.stringify(testMembers[0].name)); 
            }
          });
      }
  });

---

您还可以在HTML上添加条件，如

<span> {{testMembers ? testMembers[0]?.name : ' '}} </span>

{{testMembers？testMembers[0]？。名称：“”}

---

由于获取数据可能需要一些时间，因此首先执行HTML excute，因此此条件有助于避免此错误。

Ok cool，感谢您的支持。那么你认为在代码中创建“名称”更好吗？是的。我还建议使用

型号

进行严格打字。是的，很酷，谢谢。您认为这样直接在模板中添加数据更有效吗？是的。它将更有效地减少组件ts文件上的不必要条件。

this.user.subscribe((auth) => {
      if (auth) {
            this.itemService.getTestMembers(auth.uid).subscribe(testMembers => {
            this.testMembers = testMembers;
            if(testMembers.length > 0 ) {//////////add this
                    this.userName = (JSON.stringify(testMembers[0].name)); 
            }
          });
      }
  });

<span> {{testMembers ? testMembers[0]?.name : ' '}} </span>