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？.first_name}
姓氏：
{{userData？.last_name}
电邮：
{{userData？.email}
流动电话：
{{userData.mobile{u no}

在这里，我在

userData

变量之后使用了

？

。但是当我写作的时候？还有最后一项

e、 g.

mobile\u no

它不会在web上显示任何数据（名字、姓氏、电子邮件或手机号码）。但如果我从最后一项或任何一项中删除

？

。数据显示在网页的控制台中

错误显示如下所示

---

如果您订阅的是可观察的

而不是在模板中放置
？
，请确保最初使用空对象初始化
this.userData

大概是这样的：

userData = {};

import { map } from 'rxjs/operators';

...

userData$;

...

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


我建议您在模板中使用
async
管道，而不要订阅可观察的。假设您将
用户数据
作为包含
电子邮件
，
名字
等的对象获取。在您的
用户数据
对象中，这看起来像这样：

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>


名字：
{{userData.first_name}
姓氏：
{{userData.last_name}
电邮：
{{userData.email}
流动电话：
{{userData.mobile{u no}


这是给你的裁判的一封信

请共享您的
json
。如果可能，您可以在
stackblitz.com
中提供从服务中获取的数据以及一个最小的小示例。您可以在您的
ngOnInit
中显示
console.log（this.compiler.constructUserData（data））
的输出吗？数据是从api中获取的，如{“first\u name”：“，”last\u name:“，”email:“，”mobile\u no:”}我知道您的意图是Umair，但我坚信您从
this.compiler.constructUserData（data）
获得的输入并不完全是您所期望的。@Stavm当我在这一行添加断点时，执行数据会显示出来。但当它没有停止与断点。数据不显示。管道，地图不工作。这是服务getUser（id）{返回this.http.get（
${ConstantService.apiRoutes.user}/${id}
）；}@UmairJameel中的getUser函数，我已经用一个函数更新了我的答案，这可能会帮助您理解我的建议。