在 Angular 中渲染模板之前加载数据

我在用角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>

在这里我用过? after userData多变的。但是当我写的时候？还有最后一项

e.g. mobile_no它不会在网络上显示任何数据（名字、姓氏、电子邮件或手机号码）。但如果我删除?从最后一项或任何一项开始。数据显示但在网页的控制台中。

错误显示如下所示。

如果您订阅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供您参考。