在模板ANGULAR5中显示数据(对象)的最佳方式

Question

在这种情况下，在

模板 Angular5 中显示数据的最佳方法是什么：

我在这里从Firestore(=firebase(加载数据：

 ngOnInit() {
    this.user = this.authService.afAuth.authState;
    this.user.subscribe((auth) => {
      if (auth) {
            this.itemService.getTestMembers(auth.uid).subscribe(testMembers => {
            this.testMembers = testMembers;
          });
      }
  });

}

Firestore 响应为：[{"email":"[e-mail]","name":"John"}]

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

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

作品，显示名称，但我有一个错误：TypeError: _co.testMembers is undefined

---

2° 代码中的第二解显示名称：

userName: string;
 ngOnInit() {
    this.user = this.authService.afAuth.authState;
    this.user.subscribe((auth) => {
      if (auth) {
            this.itemService.getTestMembers(auth.uid).subscribe(testMembers => {
            this.testMembers = testMembers;
            **this.userName = (JSON.stringify(testMembers[0].name)); <-- here**
          });
      }
  });

什么是最好的解决方案，或者也许还有另一种解决方案。谢谢 }

Answer 1

服务响应可能存在延迟，因为它是异步的，因此您应该在访问对象之前添加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)); 
            }
          });
      }
  });

Answer 2

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

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

由于获取数据可能需要一些时间，并且首先执行HTML，因此这种情况有助于避免此错误。