Angular2：更新订阅者中的对象

Question

以下是我的父（常规）组件，它从服务器加载数据并将其绑定到子（订单）组件

import { Component, OnInit ,Output,EventEmitter} from '@angular/core';
    import { REST,Response } from '../../../services/rest/rest.service';
    import {Observable} from 'rxjs/Observable';

    @Component({
      selector: 'general',
      template: '<div>
      <div class="order">
         <order [order]="orderData"></order>
      </div>
        </div>',
      styleUrls: ['./general.component.css']
    })

    export class GeneralComponent {
       public orderData: Order = null;
      public static projectDataUrl: string = 'orderViewOrder';


      constructor(private rest: REST) {
          this.loadOrderData();
        }
      }





      private loadOrderData(): any {
            this.rest.getWithStringId(GeneralComponent.projectDataUrl, '123').map(
          (res: Response) => res.json()).
          catch((error:any)=>Observable.throw(error.json()||'Server error')).
          subscribe(data => {
            console.log(data);
            this.orderData =<Order>data   // here data is set
          this.notifyOthers.emit(this.orderData)},
           err => console.log("Error should get printed \n"+err),
            () => console.log("It should be executed in the end"));

      }



    }

    export class Order {
      communicatedFinishedDate:number[];
      customerId:number;
      estimatedSampleArrival:number[];
      finishDate:number[];
      id:string;
      name:string;
      oldId:string;
      orderNumber:string;
      quoteNumber: string;
      samplesStoredUntil:any;
      startDate:number[];
      type:string;

    }



    }

在子组件中

**OrderComponent**

import { Component, OnInit ,Input} from '@angular/core';
import {Order} from '../../container/general/general.component';
@Component({
  selector: 'order',
  template: '<div>
<div class="order">
<h2 class="label">Order details</h2><br>
<label>Type</label><br>
<span>{{orderData.type}}</span><br>
<label>Services/Characteristics</label><br>
<span>{{orderData.finishDate}}</span><br>
<label>Quote/Offer No</label><br>
<span>{{orderData.quoteNumber}}</span><br>
<label>Order/Purchase No</label><br>
<span>{{orderData.orderNumber}}</span><br>
</div>
</div>',
  styleUrls: ['./order.component.css']
})
export class OrderComponent  {
@Input('order') public orderData: Order;

  constructor() { 

  }




}

问题：父组件成功加载数据，但在订单组件中为空。

当我调试时，我可以在 this.orderData 中看到数据。

据我了解，订阅者就像“异步方法” OrderComponent 甚至在设置之前使用 orderData 订阅者

（如果我错了，请纠正我）

那么解决办法是什么？我阅读了有关事件发射器的信息并尝试在通用组件中做这样的事情：

@Output() notifyOthers: EventEmitter = new EventEmitter();

在订阅者中：

...
subscribe(data => {
        console.log(data);
        this.orderData =<Order>data
      this.notifyOthers.emit(this.orderData)},
...

请帮帮我。

谢谢

UPDATE如何将Not Null 数据绑定到子组件，有没有办法让实例等到我们从订阅者获取数据？ p>

我正在像这样检查子组件中的 orderData 实例：

<div class="order">
    <h2 class="label">Order details</h2><br>
    <label>Type</label><br>
    {{orderData===null}}     // returns true
    {{orderData|json}}       // returns nothing
    <span>{{orderData?.type}}</span><br> //**With Operator it shows nothing since orderData is null**
    <label>Services/Characteristics</label><br>
    <span>{{orderData.finishDate}}</span><br>
    <label>Quote/Offer No</label><br>
    <span>{{orderData.quoteNumber}}</span><br>
    <label>Order/Purchase No</label><br>
    <span>{{orderData.orderNumber}}</span><br>
    </div>

UPDATE2 当我在 OrderComponent 实际处理订阅者函数之前调试控制首先进入。

Answer 1

orderData 为空，因为您在订阅者设置之前将其发送到子组件。在你的 html 中试试这个，这应该可以工作（如果没有，请通知我）；

...
<div class="order" *ngIf="orderData">
     <order [order]="orderData"></order>
</div>

Angular 创建你的组件并调用你的服务，但是这个服务是异步的。创建子组件时，您的服务响应尚未到达，并且为 null 的 orderData 已转到您的子组件。