从API获取多个数据需要时间才能加载到Angular 7中

Question

我想使用API在表中显示数据，但API数据更多，加载到视图中需要时间。我使用了一个数组来存储API数据并将其显示在视图中。

下面是代码：

API调用

this.getTopicList(this.chapterID).subscribe(
(data) => {
this.topicList = [];
if (data !== null || data['length'] !== 0) {
this.topicList.push(data);
}
this.showSpinner = false;
},
(error) => {
this.showSpinner = true;
}

带有for循环的HTML代码：

<tr *ngFor="let topic of _sharedServices.topicList; let i = index;"
[ngStyle]="{'border-bottom': '1px solid' +currentColor}">
<th><span class="chapter-count" [ngStyle]="{'background-color': currentColor}">{{i+1}}</span></th>
<td (click)="showVideo(topic.topic_name, i, topic)">
<span class="chapter_name">
{{ topic.topic_name }}
</span></td>
</tr>

我该如何实现这一点，以便它立即加载视图中的数据？

Answer 1

请尝试在组件中实现onPush或ChangeDetectionStrategy

这样做将指示Angular仅在向这些组件及其子树传递新引用时才对其运行更改检测，而不是在简单地更改数据时。

当您更新变量并希望它反映在html 中时，运行this.ref.markForCheck()或this.ref.detectChanges()

请查看以下链接了解更多信息

https://angular.io/api/core/ChangeDetectionStrategy

https://alligator.io/angular/change-detection-strategy/