Лучший способ отображения данных (объекта) в шаблоне ANGULAR5

Question

Лучший способ отображения данных (объекта) в шаблоне ANGULAR5

1

каков наилучший способ отображения данных в шаблоне 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":"[email protected]","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**
          });
      }
  });

Какое лучшее решение, или, возможно, есть другое решение. Спасибо }

Sylvain 20 янв. 2018, в 05:50

Источник

Теги:

angular

javascript

angular5

2 ответа

1

Вы также можете добавить условие к HTML как

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

Поскольку получение данных может занять некоторое время, и сначала выпустить HTML, чтобы это условие помогло избежать этой ошибки.

Dipten 20 янв. 2018, в 04:09

0

ах да круто спасибо. Как вы думаете, более эффективно добавлять данные прямо в шаблон, как это?
Sylvain 20 янв. 2018, в 23:55
0

Да. Это будет более эффективным и уменьшит нежелательные условия в файле ts компонента.
Dipten 21 янв. 2018, в 03:37

Ещё вопросы

ах да круто спасибо. Как вы думаете, более эффективно добавлять данные прямо в шаблон, как это?
Да. Это будет более эффективным и уменьшит нежелательные условия в файле ts компонента.

Aravind · Accepted Answer · 2018-01-20T02-36-00.000Z

Может возникнуть задержка в ответе службы, так как она асинхронна, поэтому вы должны добавить условие 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)); 
            }
          });
      }
  });

Хорошо, круто, спасибо за этот момент. Так вы думаете, что лучше создать «имя» в коде?
да. Я также рекомендую иметь models для строгой печати