Загрузить данные перед визуализацией шаблона в Angular - PullRequest
Новая
       42

Загрузить данные перед визуализацией шаблона в Angular

0 голосов
/ 01 января 2019

Я использую Угловой 6 и использую одностороннюю привязку.

Мой код в компоненте приведен ниже. 

ngOnInit() {
 this.profile.getUser(1).subscribe((data) => {
  this.userData = this.compiler.constructUserData(data);
 });
}

userData имеет один объект и имеет свойства.Я пытаюсь связать его данные в HTML, как показано ниже 

<mat-list-item role="listitem">
          <span matLine>
            <span>First Name: </span>
            <span> {{userData?.first_name}}</span>
          </span>
        </mat-list-item>
        <mat-list-item role="listitem">
          <span matLine>
            <span>Last Name: </span>
            <span> {{userData?.last_name}} </span>
          </span>
        </mat-list-item>
        <mat-list-item role="listitem">
          <span matLine>
            <span>Email: </span>
            <span> {{userData?.email}} </span>
          </span>
        </mat-list-item>
        <mat-list-item role="listitem">
          <span matLine>
            <span>Mobile: </span>
            <span> {{userData.mobile_no}} </span>
          </span>
        </mat-list-item>

, здесь я использовал ? после userData переменной.Но когда я пишу?с последним элементом также

например, mobile_no он не показывает какие-либо данные (имя, фамилия, адрес электронной почты или номер мобильного телефона) в Интернете.Но если я уберу ? с последнего предмета или любого предмета.Данные отображаются, но в консоли веб-страницы.

Ошибки отображаются, как показано ниже.

Error description

1 Ответ

0 голосов
/ 01 января 2019

Если вы подписываетесь на Observable и не размещаете ? в шаблоне, обязательно инициализируйте this.userData изначально пустым объектом.

Что-то вроде этого: 

userData = {};

Я бы рекомендовал вам использовать async канал в шаблоне, а не подписываться на Observable.Предполагая, что вы получите userData как объект, содержащий email, first_name и т. Д. В вашем userData объекте, это будет выглядеть примерно так: 

import { map } from 'rxjs/operators';

...

userData$;

...

ngOnInit() {
  this.userData$ = this.profile.getUser(1).pipe(
    map(data => {
      return this.compiler.constructUserData(data);
    })
  );
}

И в вашемшаблон: 

<div *ngIf="userData$ | async as userData">
  <mat-list-item role="listitem">
    <span matLine>
            <span>First Name: </span>
    <span> {{userData.first_name}}</span>
    </span>
  </mat-list-item>
  <mat-list-item role="listitem">
    <span matLine>
            <span>Last Name: </span>
    <span> {{userData.last_name}} </span>
    </span>
  </mat-list-item>
  <mat-list-item role="listitem">
    <span matLine>
            <span>Email: </span>
    <span> {{userData.email}} </span>
    </span>
  </mat-list-item>
  <mat-list-item role="listitem">
    <span matLine>
            <span>Mobile: </span>
    <span> {{userData.mobile_no}} </span>
    </span>
  </mat-list-item>
</div>

Вот Рабочий образец StackBlitz для вашей ссылки.

...