Asynchrone Anfrage - Daten laden nach der Direktive

Question

Hilfe brauchen!

Ich habe eine Komponente 'form.component.ts'.

------------- ------------- form.component.ts

@Component({ 
 
    selector: 'my-app', 
 
    providers: [ShopService], 
 
    templateUrl: 'app/admin/shop/shop-form/form.html' 
 

 
}) 
 

 
export class FormComponent implements OnInit { 
 
    private shop:Shop = new Shop(); 
 
    
 
    ... 
 

 
    this.route.params.subscribe(params => { 
 
    if (params['id'] !== undefined) { 
 
       this.shopService.getById(params['id']).subscribe(result => this.shop = result); 
 
       
 
     } 
 
    }); 
 
}

mein ' form.html 'hat eine Direktive, was eine Variable (shop.state) hat, was von in ajax geladenen Daten abhängig ist.

------------- ------------- form.html

<state-city [state]='shop.state' (stateSelected)="shop.state = $event" [city]='shop.city' (cidadeSelected)="shop.city = $event"></state-city>

Mein Problem ist, dass Manchmal benötigt die Ajax-Anfrage viel Zeit zum Laden und meine Direktive hat einen undefinierten Wert.

Ich brauche was die Direktive laden nach Anfrage Ajax etwas zurückgeben.

** EDITED **

ich meinen Code für eine bessere Sicht Reducin. summieren ... Ich muss zuerst die Anfrage Ajax und dann das Drucken der Vorlage passieren. Meine <state [state]='shop'></state> benötigt diese Variable für die Arbeit gut.

Mein form.component ist:

@Component({ 
 
    selector: 'my-app', 
 
    providers: [ShopService], 
 
    template: `<state [state]='shop'></state>` 
 

 
}) 
 
export class FormComponent { 
 
    private shop: string; 
 
    
 
    constructor(private shopService:ShopService) { 
 

 
     this.route.params.subscribe(params => { 
 
      
 
      this.shopService.getById(params['id']).subscribe(result => this.shop = result); 
 
     }); 
 
    } 
 
}

** RESOLVED **

Problem behoben !!! Ich löste mit der Methode ngOnChanges von angular 2. jede Zustandsänderung diese Methode aufgerufen wird. Das heißt, nachdem der Ajax-Aufruf abgeschlossen ist, wird diese Methode aufgerufen. Daher aktualisieren wir die Variable und meine Anweisung funktioniert gut.

Answer 1

Verwendung kann ngIf warten, bis Sie Daten zu erhalten,

<state-city *ngIf="shop" 
      [state]='shop.state' 
      (stateSelected)="shop.state = $event" 
      [city]='shop.city' 
      (cidadeSelected)="shop.city = $event"> 
</state-city>