javascript - 无法立即从 subscribe() 分配变量

Question

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

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

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

这是我的代码:

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);
  }

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 负责为您订阅和取消订阅。