Html 角度8-初始加载时值更改和模板呈现之间的延迟

我正在构建一个经典的应用程序，从主页上的http调用加载数据。在提取数据时，将显示一个加载器

当应用程序初始化时，第一个http调用的加载时间异常长。之后，即使在刷新页面后，速度也非常快

我在网络检查器中注意到，在加载程序消失之前，调用实际上已经完成了很长时间。在到处放置一些

console.log

之后，数据被提取并准备好使用，加载程序被设置为false，但它仍然显示

组件

this.villageService.getVillages().subscribe({
    next: (villages: Village[]) => {
        this.villages = villages.map(village => new Village().fromJson(village));
        this.isLoading = false;
        console.log(this.villages);
        console.log(this.isLoading);
    },
    error: (error: any) => {
        this.isLoading = false;
    },
    complete: () => (this.isLoading = false)
});

模板

<div class="row">
    <app-village-card
        *ngFor="let village of villages | orderByProperty: 'title'"
        class="col-12 col-sm-6 col-lg-6 col-xl-4"
        [village]="village"
    >
    </app-village-card>
</div>
<app-loader [isLoading]="isLoading" mode="spinner">Loading...</app-loader>

加载。。。

两个

console.log

在加载程序消失之前很久就显示该值

---

因此，我的结论是，模板的呈现在某种程度上是延迟完成的，但只有在应用程序首次在浏览器中初始化时才进行。我通过强制更改检测来修复它

constructor(
    private changeDetector: ChangeDetectorRef
) {}

getVillages() {
    this.isLoading = true;
    this.subscriptions.add(
        this.villageService.getVillages().subscribe({
            next: (villages: Village[]) => {
                this.villages = villages.map(village => new Village().fromJson(village));
                this.isLoading = false;
                this.changeDetector.detectChanges(); // -------> this line
            },
            error: (error: any) => {
                this.isLoading = false;
            },
            complete: () => (this.isLoading = false)
        })
    );
}

---

这可能与变化检测有关。您是否有

changeDetection:ChangeDetectionStrategy.on在
@组件上推送
？我没有使用changeDetection，但您给了我一个想法。我添加了
this.changedector.detectChanges（）它成功了：）