Question

从我的组件中调用服务中的方法，该方法从API获取订单。

我的服务：

 getOrder(orderId: number): Observable<Order> {
 const url = `${this.ordersUrl}/getOrder?orderId=${orderId}&country=${Cookie.get('country')}`;
 return this.http.get(url, {headers: this.headers}).map(response => response.json()).catch(this.errorService.handleError);

}

我的组件：

 ngOnInit() {
this.sub = this.route.params.subscribe(params => {
  this.orderId = +params['orderId'];
  this.orderService.getOrder(this.orderId)
  .subscribe( order => {
    this.order = order;
    console.log(this.order.commentAdmin);},
    error => this.errorMessage = <any>error);
});

当我为我的组件加载我的模板时，我得到的数据来自＆＃34; order＆＃34;我知道数据未定义。但是，如果我在console.log中，我会得到正确的答案。我认为它在加载模板之前加载数据，并且存在一些问题。我想尝试使用async并等待获取并显示数据，但我不知道如何做到这一点。我们通过使用延迟来解决这个问题，因为我们之前没有人使用过Angular。如何使用await和async正确执行此操作？

Answer 1

您可以在模板中使用elvis运算符来处理未定义的order。

<p>{{ order?.commentAdmin }}<p>

发生这种情况的原因是angular在从端点返回数据之前绑定了order对象并且正在破坏模板。

Answer 2

您可以采用更具反应性的方法，并利用您从服务中获得的观察结果。

将您的组件更改为以下内容：

order$: Observable<Order>;

ngOnInit() {
  this.order$ = this.route.params
    .switchMap(params => this.orderService.getOrder(+params['orderId']))
    .catch(error => this.errorMessage = <any>error);
}

您的模板：

<div *ngIf="order$ | async as order">
{{ order.commentAdmin }}
</div>

您不必取消订阅，因为Angular会为您的async执行取消订阅，并且只有在observable发出值时才会呈现订单数据。

从API加载数据的问题 - 想要使用async / await而不是

2 个答案: