Angular 从API加载数据时出现问题-希望改用async/await吗

在我的组件中，我正在调用服务中的方法，该方法从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);

getOrder（orderId:number）：可观察{
constURL=`${this.ordersUrl}/getOrder？orderId=${orderId}&country=${Cookie.get（'country'）}`；
返回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);
});

ngOnInit（）{
this.sub=this.route.params.subscribe（params=>{
this.orderId=+params['orderId']；
this.orderService.getOrder（this.orderId）
.订阅（订单=>{
这个。顺序=顺序；
console.log（this.order.commentAdmin）；}，
error=>this.errorMessage=error）；
});

当我使用从“订单”中获取的数据加载组件的模板时，我得到的数据是未定义的。但是如果我使用console.log，我会得到正确的响应。

---

我认为它在加载模板之前加载数据，但出现了一些问题。我想尝试使用async和Wait来获取和显示数据，但我不确定如何做到这一点。我们已经通过使用延迟解决了这个问题，因为以前没有人使用过Angular。如何通过使用await和async正确地做到这一点

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

订单

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

{{order？.commentAdmin}}

---

发生这种情况的原因是angular在从终结点返回数据之前绑定了

order

对象，并破坏了模板。

您可以在模板中使用elvis操作符来处理未定义的

顺序

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

{{order？.commentAdmin}}

发生这种情况的原因是angular在从端点返回数据之前绑定了
order
对象，并破坏了模板。
您可以采取更被动的方法，并利用从服务中获得的可观察数据

将组件更改为以下内容：

order$: Observable<Order>;

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

order$：可见；
恩戈尼尼特（）{
this.order$=this.route.params
.switchMap（params=>this.orderService.getOrder（+params['orderId']））
.catch（error=>this.errorMessage=error）；
}

以及您的模板：

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


{{order.commentAdmin}}

优势您不必像Angular使用async那样取消订阅，它只在可观察对象发出值时才呈现订单数据。
您可以采取更被动的方法，利用您从服务中获得的可观察对象

将组件更改为以下内容：

order$: Observable<Order>;

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

order$：可见；
恩戈尼尼特（）{
this.order$=this.route.params
.switchMap（params=>this.orderService.getOrder（+params['orderId']））
.catch（error=>this.errorMessage=error）；
}

以及您的模板：

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


{{order.commentAdmin}}

优点您不必像Angular使用async那样取消订阅，它只在可观察对象发出值时才呈现订单数据。
谢谢，这确实删除了控制台中的所有警告。因此，通过这样做，它会等待绑定数据，直到从端点返回数据为止。elvis运算符是语法性的用于三元空检查。它与
{{order？order.commentAdmin:'}}}
相同。您可以将它们链接在一起
order？.commentAdmin？.userID
，甚至将它们与
异步
管道
（order | async）一起使用？.commentAdmin
Np很高兴我能提供帮助：）谢谢，这确实删除了控制台中的所有警告。因此，通过这样做，它将等待绑定数据，直到数据从端点返回为止？elvis运算符是三元空检查的语法糖。它与
{order？order.commentAdmin:'}相同
。您可以将它们链接在一起
order？.commentAdmin？.userID
，甚至可以将它们与
async
管道
（order | async）一起使用。commentAdmin
Np很高兴我能提供帮助：）我得到：错误：Uncaught（承诺中）：TypeError:无法读取未定义类型的属性'invoiceId'。错误：无法读取未定义类型的属性'invoiceId'。这是针对订单模型具有的其他属性。我需要对用于检索数据的服务中的方法做些什么吗？我认为您的服务很好。在模板中的任何地方，您现在都需要更改您的code使用异步从可观察对象读取。看起来您正在访问顺序，而不是可观察对象。我得到：Error:Uncaught（承诺中）：TypeError:无法读取未定义类型的属性'invoiceId'。错误：无法读取未定义类型的属性'invoiceId'。这是针对订单模型具有的其他属性。我需要对用于检索数据的服务中的方法做些什么吗？我认为您的服务很好。在模板中的任何地方，您现在都需要更改您的code使用异步从可观察对象读取。看起来您正在访问顺序，而不是可观察对象。