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

【问题标题】：Load the data before template render in Angular在 Angular 中的模板渲染之前加载数据
【发布时间】：2019-05-28 08:50:10
【问题描述】：

我正在使用 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>

这里我在userData 变量之后使用了?。但是当我写？最后一项也一样

例如mobile_no 它不显示网络上的任何数据（first_name、last_name、email 或 mobile_no）。但是，如果我从最后一项或任何一项中删除?。数据显示但在网页的控制台中。

错误如下所示。

【问题讨论】：

请分享您的json。如果可能的话，您从服务中获得了什么数据，并在stackblitz.com 中提供一个最小的小例子。
你能在你的ngOnInit 中显示console.log(this.compiler.constructUserData(data)) 的输出吗？
数据正在从 API 中获取，例如 {"first_name": "", "last_name": "", "email": "", "mobile_no": ""}
我知道您对 Umair 的意图，但我坚信您从 this.compiler.constructUserData(data) 获得的信息并非您所期望的。
@Stavm 当我在这一行添加断点时，执行它数据显示。但是当它没有被断点停止时。数据不显示。

标签： angular typescript data-binding

【解决方案1】：

如果您订阅了Observable 并且没有在模板中放置?，请确保最初使用空对象初始化this.userData。

类似这样的：

userData = {};

我建议您宁愿在模板中使用async 管道，而不是订阅 Observable。假设您将在 userData 对象中将 userData 作为包含 email、first_name 等的对象，这看起来像这样：

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>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

管道，地图不工作。这是我们在服务中的 getUser 函数 getUser(id) { return this.http.get(${ConstantService.apiRoutes.user}/${id}); }
@UmairJameel，我已经用 Working Sample StackBlitz 更新了我的答案，这可能有助于您理解我的建议。