Получение нескольких данных из 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;
      }

HTML код с для l oop:

<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 запускать обнаружение изменений в этих компонентах и ​​их поддереве только при передаче им новых ссылок по сравнению с тем, когда данные просто мутируются.

Запускать this.ref.markForCheck() или this.ref.detectChanges(), когда вы обновляете переменную и хотите, чтобы она отражалась в html

Пожалуйста, проверьте следующие ссылки для получения дополнительной информации

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

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