Angular2: Aktualisieren des Objekts in Subscriber

Question

Folgende ist meine Eltern (General) Komponente, die die Daten vom Server geladen wird und es zu Kind-Bindung (Order) Komponente

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; 

    } 



    } 

Und in der Kind Komponente

Problem: Übergeordnete Komponente lädt die Daten erfolgreich, aber in der Bestellkomponente ist es null.

Wenn ich debuggen kann ich die Daten in this.orderData.

Wie pro mein Verständnis für Abonnenten ist wie "Async-Methode" OrderComponent die orderdata verwendet vor seiner selbst in Subscriber gesetzt

(korrigiert mich wenn ich falsch bin)

Was ist Die Lösung dann? Ich las über Ereignisemitter und versuchte, etwas in der allgemeinen Komponente zu tun:

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

und in Abonnenten:

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

Bitte helfen Sie mir dies mit.

Dank

UPDATE wie kann ich binden die Not Null Daten Child Komponente, ist es eine Möglichkeit, um die Instanz zu warten, um zu machen, bis wir die Daten von Abonnenten bekommen?

I orderdata Beispiel in untergeordneten Komponenten wie folgt bin Überprüfung:

<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 wenn ich die Kontrolle debuggen zuerst in OrderComponent geht, bevor es tatsächlich zu der Teilnehmerfunktion verarbeiten.

Answer 1

orderData ist null, weil Sie es an untergeordnete Komponente senden, bevor es vom Abonnenten festgelegt wurde. Versuchen Sie dies in Ihrem HTML, das sollte funktionieren (wenn nicht, bitte benachrichtigen Sie mich);

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

Angular erstellen Sie Ihre Komponente und rufen Sie Ihren Dienst, aber dieser Dienst ist async. Wenn die untergeordnete Komponente erstellt wird, ist Ihre Dienstantwort noch nicht angekommen und orderData, die null ist, ist zu Ihrer unterordneten Komponente gegangen.