我正在使用 Angular 6 并使用单向绑定(bind)。
我在组件中的代码如下。
ngOnInit() {
this.profile.getUser(1).subscribe((data) => {
this.userData = this.compiler.constructUserData(data);
});
}
userData 有一个对象,它有属性。我正在尝试将其数据绑定(bind)到 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)。但是,如果我从最后一项或任何一项中删除 ?
。数据显示在网页的控制台中。
错误显示如下。
最佳答案
如果您订阅了 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>
Here's a Working Sample StackBlitz for your ref.
关于angular - 在 Angular 中渲染模板之前加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53993922/