Warten Sie, bis http get abgeschlossen ist, und gibt Daten

Question

Ich bin Daten vom Server erhalten http, in den service.ts:

getAllCursenValue():Observable<Cursen[]>{ 
    let cursen$ = this.http 
     .get(this.baseUrl,{headers: this.getHeaders()}) 
     .map(mapCursen); 
    return cursen$; 
} 

function mapCursen(response:Response):Cursen[]{ 
    return response.json().map(toCursen); 
} 

function toCursen(r:any):Cursen{ 
    let cursen = <Cursen>({ 
     id_boitier:r.id_boitier, 
     id_phase:r.id_phase, 
     date:new Date(r.date), 
     power:r.power, 
     voltage:r.voltage, 
     current:r.current, 
     phase:r.phase, 
     thd:r.thd, 
     acc:r.acc, 
     flags:r.flags, 
     added_info:r.added_info 
    }); 
    return cursen; 
} 

In meiner Komponente ich diese Daten mit highchart zeigen will, das Problem ist, dass, wenn ich klicke auf den Button gibt es nichts in der Tabelle gezeigt ist, glaube ich, dass wenn ich die Daten klicken sind noch nicht fertig

component.ts:

getCursenByDateTest(){ 
this.cursenService 
    .getCursenValueByDateTest("2016-7-30","2016-7-31") 
    .subscribe(p => { 
    this.cursens = p; 
    console.log(p) 
    console.log(this.cursens.length); 
    }); 
    } 

Methode, wenn ich cli ck in die Schaltfläche: Die Konsole Druck der „GGGGG“ und „PPPPP“, bevor die Objekte drucken:

ChartLine(){ 

this.getCursenByDateTest(); 
    console.log("GGGGGGGGGGGGGG"); 
    console.log("PPPPPPPPPPPPPPPPPP",this.finaldate1); 

    this.options1 = { 
    chart: { 
     type: 'area' 
    }, 
    title: { 
     text: 'Area chart with negative values' 
    }, 
    xAxis: { 
     categories: this.voltagesMax 
    }, 
    credits: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'John', 
     data: this.voltagesMax 
    }] 
    }; 
    } 

Wie kann ich alle die Daten vor sie in die Charts zu senden bekommen?

Answer 1

Wenn Sie eine Observable abonnieren, können Sie eine Callback-Funktion bereitstellen. Im folgenden Beispiel nenne ich es CompleteGet. CompleteGet() wird nur bei einem erfolgreichen get aufgerufen, der Daten zurückgibt und kein Fehler. Sie legen in der Callback-Funktion die Logik fest, die Sie benötigen.

getCursenByDateTest(){ 
this.cursenService 
    .getCursenValueByDateTest("2016-7-30","2016-7-31") 
    .subscribe(p => { 
    this.cursens = p; 
    console.log(p) 
    console.log(this.cursens.length); 
    }, 
    error => this.error = error, 
    () => this.CompleteGet()); 
} 

completeGet() { 
    // the rest of your logic here - only executes on obtaining result. 
}