So rufen Sie eine Funktion kurz vor der * ngFor-Schleife auf? :: Angular2

Question

Zunächst einmal habe ich eine HTTP-Anforderung, die wie folgt aussieht:

private getValues() { 
    this._watchlistElements.map(v => 
    this.http.get('http://localhost:8080/getValue/' + v.xid) 
    .subscribe(res => { 
     this._values.push(res.json()); 
    })); 
}; 

Alles funktioniert gut, aber das Problem ist, dass es eine chaotische, unsortierte Array von Objekten zurückgibt. Ich möchte es sortieren, deshalb habe ich eine separate Sortierfunktion vorgenommen haben:

private sortPoints(){ 
    this._values.sort((a,b) => a.ts - b.ts); 
} 

Die Elemente aus _values Variable durch *ngFor Schleife gezeigt werden:

<tr *ngFor="let elem of _values"> 

Die getValues() Funktion jeder aufgerufen wird 5 Sekunden in einem Intervall:

this.loadPoints = setInterval(() => { 
    this.getValues(); 
}, 5000); 

Jetzt muss ich die Sortierfunktion aufrufen - sortPoints() - irgendwo. Ich dachte, so wird es gut gehen:

Aber leider hat es keinen Einfluss auf das Array. Die *ngFor Schleife füllt die Tabelle nur mit unsortierten Elementen. Aber wenn ich nur eine einfache Taste:

<button (click)="sortPoints()">Sort it!</button>

Das Array dynamisch sortiert wird, nur direkt nach dem Klick.

Dann ist meine Frage, wenn Sie irgendwelche anderen Ideen haben, wo die Funktion platzieren, um diesen Mechanismus arbeiten zu lassen?

Jede Hilfe sehr geschätzt.

EDIT Implementiert die @Sasxa Lösung erhielt folgenden Fehler:

Answer 1

können Sie Kette Observablenoperatoren und verarbeitet, um den Strom, so dass am Ende Sie (wenn Sie sich vorher anmelden) haben Sie die Werte so, wie Sie möchten:

private getValues() { 
    this._watchlistElements.map(v => 
    this.http.get('http://localhost:8080/getValue/' + v.xid) 
     .map(res => res.json()) 
     .map(data => this._values.push(data)) 
     .map(() => this._values.sort((a,b) => a.ts - b.ts)) 
     .subscribe(sorted => this._values = sorted)); 
};