我想从数据库中检索一行并将此信息显示在我的页面上。
问题是订阅是异步的,所以它不会立即执行,因此我无法从一开始就访问数据。 这是我执行代码时显示的错误:
但是这个属性实际上是在页面上显示的,因为最终收到了。我就是这么理解的。几个小时以来,我一直试图摆脱这个问题,但我就是想不通。由于数据库中的数据延迟到达,我该如何抑制浏览器上的这些错误?
这是我的代码:
HTML:
<div class="img-text">
<div class="img-left">
<img class="img-responsive" src="assets/person.png">
</div>
<div class="img-right">
<b>Customer name: </b> {{order.customerName}}<br>
</div>
</div>
订单详情.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { OrdersService } from '../orders.service';
import { Order } from '../order';
@Component({
selector: 'app-order-details',
templateUrl: './order-details.component.html',
styleUrls: ['./order-details.component.scss'],
providers: [OrdersService]
})
export class OrderDetailsComponent implements OnInit {
@Input() order: Order;
constructor(private _ordersService: OrdersService) { }
ngOnInit() {
this.getOrder();
console.log(this.order);
}
getOrder(): any {
this._ordersService.getOrder(1).subscribe(order => this.order = order);
}
最佳答案
您想确保可以访问数据;否则你会尝试从一个未定义的属性中读取。有几种方法可以做到这一点:
<b>Customer name: </b> {{order?.customerName}}<br>
这仍然会显示 Customer name:
,但什么也没有。相反,您可能希望使用 ngIf
和 else
来显示加载指示器或类似的东西。
<div class="img-right" *ngIf="order$ | async as order; else loading">
<b>Customer name: </b> {{order.customerName}}<br>
</div>
<div #loading>Loading...</div>
请注意,order
可能不应该是输入。您将需要一个 order$
属性:
order$ = this._ordersService.getOrder(1);
| async
负责为您订阅和取消订阅。
关于javascript - 无法立即从 subscribe() 分配变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48909651/