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() { 

    } 




} 

問題：親コンポーネントは正常にデータをロードしていますが、オーダーコンポーネントではnullです。

私はデバッグ時にのthis.orderDataのデータを見ることができます。ある何

私の理解の加入者は、そのさえ 加入者

に設定する前に OrderComponentがorderDataを使用している「非同期方式」のようなものである1として（私が間違っているなら、私を修正してください）

そのソリューションは？私はEvent Emitterについて読んで、General Componentで次のようなことをしようとしました：

@Output（）notifyOthers：EventEmitter = new EventEmitter（）;

とサブスクライバで：

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

これで私を助けてください。

おかげ

UPDATEは、どのように私たちは、加入者からのデータを取得するまで待つインスタンスを作るためにどのような方法があり、子供コンポーネントにNOT NULLデータをバインドすることができますか？

私はこのような子コンポーネントに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> 

アップデート2私はそれが実際に加入者機能を処理する前に、コントロールがOrderComponentに最初行きデバッグします。

Answer 1

orderDataはサブスクライバによって設定される前に子コンポーネントに送信されているため、nullです。あなたのhtmlでこれを試してください。これはうまくいくはずです（そうでなければ、私に通知してください）。

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

コンポーネントを作成してサービスを呼び出しますが、このサービスは非同期です。子コンポーネントが作成されると、サービス応答はまだ到着しておらず、nullであるorderDataが子コンポーネントに送られました。