Question

我正在使用 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不会显示网络上的任何数据（名字，姓氏，电子邮件或mobile_no）。但是，如果我从上一个项目或任何一个项目中删除了?。数据显示在网页控制台中。

错误显示如下。

Answer 1

如果您要订阅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>

这是您推荐的Working Sample StackBlitz。

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

1 个答案: