javascript - 在模板 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)); 
            }
          });
      }
  });