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

Question

what is the best way to display data in template Angular5 for this case :

I load data from Firestore (=firebase) here:

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

}

Firestore response is : [{"email":"john@gmail.com","name":"John"}]

1° First solution in the template to display the name:

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

Works, the name is displayed But I have an error : TypeError: _co.testMembers is undefined

---

2° Second solution in the code to display the name:

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**
          });
      }
  });

What is the best solution, or perhaps there is another solution. Thank you }

Answer 1

There might be a delay in the service response as it is asynchronous so you should be adding a if condition before you access the object as below

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

You can also add condition on HTML like

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

As getting data may take some time and HTML excute first so this condition is help to avoid this error.