无法立即从subscribe（）分配变量

Question

我想从数据库中检索一行并在我的页面上显示此信息。

问题是订阅是异步的，因此它不会立即执行，因此我无法从一开始就访问数据。 这是我执行代码时显示的错误：

但是这个属性实际上显示在页面上，因为最终收到了。这就是我的理解。我试图摆脱这个问题几个小时，我只是想不出来。由于数据库数据延迟到达，如何在浏览器中抑制这些错误？

这是我的代码：

HTML：

Format([my_date_element], "yyyy/mm/dd")

阶details.component.ts

<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>

Answer 1

您想确保可以访问数据;否则你会尝试从未定义的属性中读取。有几种方法可以做到这一点：

<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负责订阅并取消订阅。

Answer 2

您可以使用?运算符：order?.customerName

Answer 3

另一种方法是在构造函数中初始化一个空订单：

constructor(private _ordersService: OrdersService) {
    this.order = {};
 }