在Angular中进行模板渲染之前加载数据 [英] Load the data before template render in Angular

问题描述

我正在使用 Angular 6 并使用单向绑定。

I am using Angular 6 and using one way binding.

我在组件中的代码如下。

My code in component is given below.

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

userData有一个对象并且具有属性。我正在尝试将其数据绑定到HTML，如下所示

userData has one object and it has properties. I am trying to bind its data in HTML as shown below

<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>

在这里我在<$之后使用？ c $ c> userData 变量。但是当我写的时候？以及最后一个项目

here I have used ? after userData variable. But when I write ? with last item as well

例如 mobile_no 它不会显示网络上的任何数据（名字，姓氏，电子邮件或mobile_no）。但是，如果我从上一个项目或任何一个项目中删除？。数据显示在网页控制台中。

e.g. mobile_no it doesn't show any of the data (first_name, last_name, email or mobile_no) on the web. But if I remove ? from last item or any of the item. Data shows up but in console of web page.

错误如下所示。

推荐答案

如果您正在订阅 Observable 而不放置？在模板中，请确保首先使用空对象初始化 this.userData 。

If you're subscribing to the Observable and not placing a ? in the template, make sure to initialize the this.userData with an empty Object initially.

类似这样的东西：

userData = {};

---

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

---

I'd recommend you to rather use the async pipe in the template and not subscribe to the Observable. Assuming that you'll get the userData as an Object containing email, first_name, etc. in your userData Object, this would look something like this:

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>

---

---

这里是< a href = https://stackblitz.com/edit/angular-get-data-async?file=src/app/app.component.html rel = nofollow noreferrer> 工作示例StackBlitz 供您参考。

Here's a Working Sample StackBlitz for your ref.

这篇关于在Angular中进行模板渲染之前加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！