Ich habe eine Anforderung, wobei ich eine externe API aufrufen, um eine Liste von IDs für meine untergeordneten Komponenten und für jede ID, gehe ich eine andere externe API, um die Details des untergeordneten abzurufen.Mehrere untergeordnete Komponenten laden mit angular 2
Mein Angular Code in der übergeordneten Komponente wie folgt aussieht
<div *ngFor="let link of result | objToArr">
<details #Details [Id]="link.id"></details>
</div>
Das Ergebnis ist das Ergebnis ich von dem ersten API cal erhalten und in der untergeordneten Komponente des [Id] über eine Eingangsgröße. Ich rufe den Details-API-Aufruf auf ngInit der untergeordneten Komponente auf. Etwas ähnliches wie
this.Service.getDetails(this.apiBaseUrl, this.Id).subscribe(
res => {
this.result = res.json().detail;
this.units = this.result.unit;
this.meterIdonLoad = this.Id;
});
Dies funktioniert zum größten Teil, aber es gibt mehrere Anrufe gleichzeitig die Details zu holen gehen und die Browser-Warteschlangen die resultierenden Anrufe in einer eher nicht akzeptabel Wartezeit für die gesamte Seite Laden. Im Folgenden finden Sie die Netzwerklogistik für einen einzelnen Anruf. 
.
Gibt es eine bessere Möglichkeit, die Antwortzeiten für die Seite zu verbessern/die Seite neu zu gestalten?
Die einzelnen Anrufe durch Postbote für die Daten dauert zwischen 50-80 ms, so ist das Problem nicht mit dem API-Server.
Jede Hilfe wird sehr geschätzt.
Müssen Sie alle Details gleichzeitig anzeigen? Sie können jedes Mal einen Anruf tätigen, wenn das Detail angezeigt wird, und das Ergebnis zwischenspeichern. Wenn Sie sie alle gleichzeitig anzeigen müssen, sollten Sie in Erwägung ziehen, alle Werte für "link.id" an einen einzelnen Endpunkt zu übergeben und die Komponente so zu überarbeiten, dass sie über die zurückgegebenen Daten iteriert. Nur ein paar Ideen ... es gibt immer Optionen. – Brandon
Ja, muss die Details gleichzeitig anzeigen. Ich denke, ich habe nicht erwähnt, dass dies Elemente im Raster sind. Jede Werbebuchung im Raster ist eine untergeordnete Komponente. Feuern mehrere Aufrufe von API beenden besser, dass mehrere Anrufe von UI? Ich kann einen Wrapper über die externe API schreiben und das Dataset mit allen Daten der Benutzeroberfläche zuführen. Glauben Sie, dass das die Ladezeiten verbessern würde? – Vish
Ich würde alle Daten auf einmal bekommen und dann darüber iterieren. Angular ist ziemlich schnell beim Rendern von Daten. Sie können immer einen Loader anzeigen lassen, damit der Endbenutzer weiß, dass etwas zur Verbesserung der Benutzererfahrung beiträgt, sollte der API-Aufruf ein paar Sekunden dauern. – Brandon