Angular 'loading' 在子组件中等待 API

Question

所以我有一个仪表板组件，它从各种 API 中检索数据，并将其作为 @Input() 市场数据传递给显示数据的信息框容器。

我想在等待此数据时显示一个加载符号。

我曾尝试使用 *ngIf else 块，但这极大地降低了应用程序的速度，并使其在等待数据时无法更改导航。

dashboard.component.ts

    const henryHubResponse = await this.marketDataService.getHenryHub().toPromise();
      let henryHub = {
        date: this.getDateEia(henryHubResponse.series[0].data[0][0]),
        price: henryHubResponse.series[0].data[0][1].toFixed(2),
        status: henryHubResponse.series[0].data[0][1] >= henryHubResponse.series[0].data[1][1] ? true : false,
      }

    this.marketData['HENRYHUB'] = henryHub;

仪表板-infobox.component.ts

<div class="exchange" *ngIf="marketData.HENRYHUB">
                    <p style="flex: 0 0 30%; margin-left: 15px;">
                        Henry Hub
                    </p>
                    <img matListAvatar [src]="marketData.HENRYHUB.status ? 'assets/img/up.png' : 'assets/img/down.png'" style="width: 20px" />
                    <p style="flex: 0 0 40%; margin-left: 15px;">
                        {{ marketData.HENRYHUB.price }} $/MMBtu
                    </p>
                    <p>
                        {{ marketData.HENRYHUB.date | date: 'MMM dd' }}
                    </p>
                </div>

此代码在数据可用之前不会显示 ROW，因此我希望此 ROW 始终可见，但它可以显示“...”而不是 'price' 'loading'.

我试过这个：

<div class="exchange" *ngIf="marketData.HENRYHUB; else elseHENRYHUB">
                    <p style="flex: 0 0 30%; margin-left: 15px;">
                        Henry Hub
                    </p>
                    <img matListAvatar [src]="marketData.HENRYHUB.status ? 'assets/img/up.png' : 'assets/img/down.png'" style="width: 20px" />
                    <p style="flex: 0 0 40%; margin-left: 15px;">
                        {{ marketData.HENRYHUB.price }} $/MMBtu
                    </p>
                    <p>
                        {{ marketData.HENRYHUB.date | date: 'MMM dd' }}
                    </p>
                </div>

                <ng-template #else elseHENRYHUB>
                <div class="exchange">
                    <p style="flex: 0 0 30%; margin-left: 15px;">
                        Henry Hub
                    </p>
                    <img matListAvatar [src]="marketData.HENRYHUB.status ? 'assets/img/up.png' : 'assets/img/down.png'" style="width: 20px" />
                    <p style="flex: 0 0 40%; margin-left: 15px;">
                        ... $/MMBtu
                    </p>
                    <p>
                        {{ date | date: 'MMM dd' }}
                    </p>
                </div>
                </ng-template>

使用此方法后，DASHBOARD 组件变得非常慢。

Answer 1

还有...如果您使用 CDK 库，Overlay 组件无法正常工作？我说这个选项是因为您可以创建具有此功能的服务并且更易于管理。

例如：https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html

代码示例（V5）：https://github.com/jserra91/first-look-cdk

Angular 'loading' 在子组件中等待 API

Angular 'loading' while waiting for API in child component

api

rest

loading

angular