typescript - Angular 2 vänta tills tjänstens resultat kommer

Jag har ett enkelt sökformulär. Det jag försöker göra är:

• ange ett nummer i inmatningsfältet
• klicka på sökknappen
• tjänsten hittar objektet och returnerar det tillbaka till formuläret

Detta fungerar men bara om jag klickar två gånger på sökknappen. Problemet är att jag tror att de hittade uppgifterna inte har kommit från tjänsten än när jag försöker arbeta med dem.

App

@Component({
    template: `
    <input pInputText #inputNr"/>
    <button pButton type="button" (click)="onSearch(inputNr.value)"></button>
            `
})

constructor(private myService: MyService) { }

ngOnInit() {
    this.selectedInstelling = new Instelling();
}

onSearch(nummer) {

    this.myService.getByNummer(nummer)
                              .then(i => this.selectedInstelling = i);

    ......... // I want to do some work here when I get the data

    console.log(this.selectedInstelling); // First Click:  Object { vorms: Array[0] }
                                          // Second Click: Object { id: 1, naam: "Provincia...... }
}

Service

getByNummer(nummer: string) {

    return this.http.get('my json file')
        .toPromise()
        .then(res => <Instelling[]> res.json().filter(i => i.inummer === nummer))
        .then(data => {
            return data[0];
        });

}

Hur kan jag ladda objektet (data) först och sedan börja arbeta med det?

Svar #1

Du måste använda den mer detaljerade notationen i then-anropet:

onSearch(nummer) {
    this.myService.getByNummer(nummer).then((i: Instelling) => {
       this.selectedInstelling = i;
       //do whatever you want in here...
    });
}