Javascript 使用angular 2加载多个子组件

我需要调用一个外部API来获取子组件的Id列表，对于每个Id，我使用另一个外部API来获取子组件的详细信息

父组件中的角度代码如下所示

 <div *ngFor="let link of result | objToArr">
        <details #Details [Id]="link.id"></details>
</div>

这在很大程度上是可行的，但是有多个调用同时发出以获取详细信息，并且浏览器将调用排队，导致整个页面加载的等待时间非常不可接受。下面是一次呼叫的网络物流。 .

是否有更好的方法提高页面响应时间/重新设计页面

通过邮递员对DTail的单独调用需要50-80毫秒，因此问题不在于API服务器

---

非常感谢您的帮助

我认为你应该根据你的要求改变你的设计

1） 如果您的要求是在加载页面时具有所有子详细信息，则您的后台应处理该操作

2） 如果您的要求是，您可以在用户开始滚动时显示一些子详细信息和铰孔详细信息，而不是使用虚拟滚动（）

---

3） 如果您的要求是，您需要在选择子组件后显示用户详细信息，那么您可以在选择操作后触发每个单独的请求。

您必须同时显示所有详细信息吗？您可以在每次显示详细信息时触发调用并缓存结果。如果必须同时显示它们，则可以考虑将所有的<代码>链接.ID/COD>值转换为单个端点，并重构组件以迭代返回的数据。只是一些想法。。。总是有选项。是的，必须同时显示详细信息。我想我没有提到这些是网格中的项目。网格中的每个行项目都是一个子组件。从API触发多个调用比从UI触发多个调用更好？我可以在外部API上编写包装器，并将数据集与所有数据一起提供给UI。您认为这会提高加载时间吗？我会一次获取所有数据，然后对其进行迭代。Angular在渲染数据时非常快。如果API调用需要几秒钟的时间，您总是可以显示一个加载程序，让最终用户知道正在发生什么事情来改善用户体验。谢谢你的帮助，当然。总是很乐意帮忙。

                this.Service.getDetails(this.apiBaseUrl, this.Id).subscribe(
                    res => {
                        this.result = res.json().detail;
                        this.units = this.result.unit;
                        this.meterIdonLoad = this.Id;
                    });