在模板 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":"john@gmail.com","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先执行，所以这个条件有助于避免这个错误。

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

Best way to display data (object) in the template ANGULAR5

javascript

angular

angular5