Angular - 查看需要很长时间才能显示更改和性能问题

Question

我正在制作一个 Ionic Angular 应用程序。

我有一个页面显示一个微调器，直到对 API REST 的调用完成以检索所需的数据。

我的问题是调用完成后，微调器按预期消失，但数据需要大约 2 秒才能显示在屏幕上。我正在使用更改检测，但即使我将其关闭，它仍然会执行相同的操作。这个数据是一个数组。

我的代码如下

home.html

<ng-container *ngIf="loading else show">
   <spinner [purple]="true" class="veritcal-center"></spinner>
</ng-container>

<ng-template #show>
    <div>
      <ng-template #mobile>
        <ng-container *ngFor="let work of works">
          <book-home-card-mobile [work]="work">
          </book-home-card-mobile>
        </ng-container>
      </ng-template>
    </div>
</ng-template>

home.ts

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage {
  public works: Array<Work>;
  public loading: boolean;

  constructor(
    private worksService: WorksService,
    private detector: ChangeDetectorRef
  ) {
    this.works = [];
    this.loading = true;
  }

  ngOnInit() {
    this.getWorks();
  }

  ngAfterViewInit() {
    this.detector.detach();
  }

  private getWorks(): void {
    this.loading = true;
    this.detector.detectChanges();

    this.worksService.getWorks('newer', 0)
      .subscribe((response: any) => {
        response.forEach((work: Work) => this.works.push(work));
        this.loading = false;
        this.detector.detectChanges();
      });
  }
}

book-home-card-mobile.html

<div class="d-inline-block">
  <ion-card [class.view]="overlay" [class.waves-effect]="waves" [class.overlay]="overlay" class="material-tooltip-main"
    [class.xl-card]="main" [class.sm-card]="!main" data-toggle="tooltip" [title]="tooltip">
    <div class="d-inline-block portrait" [class.waves-effect]="details" [style.cursor]="details ?  'pointer' : 'auto'">
      <img [src]="work.image">
    </div>

    <div *ngIf="overlay" class="mask flex-center rgba-stylish-slight"></div>

    <div class="d-inline-block details">

      <div class="details-container">
        <ion-card-header>
          <ion-card-title style="white-space: nowrap; 
          overflow: hidden;
          text-overflow: ellipsis;" [class.waves-effect]="details" [style.cursor]="details ?  'pointer' : 'auto'">
            {{ work.title }}</ion-card-title>
        </ion-card-header>

        <div class="icons">
          <div class="d-inline-block icon">
            <ion-icon class="icon-card" name="eye"></ion-icon> <span class="amount">{{ visits }}</span>
          </div>

          <div class="d-inline-block icon">
            <ion-icon name="chatbubbles"></ion-icon> <span class="amount">{{ commentsCount }}</span>
          </div>

          <div class="d-inline-block icon">
            <ion-icon name="heart"></ion-icon> <span class="amount">{{ likes }}</span>
          </div>

        </div>

        <ng-container *ngIf="ellipsis else noEllipsis2">
          <div class="description" ellipsis [ellipsis-content]="work.description"></div>
        </ng-container>

        <ng-template #noEllipsis2>
          <div class="description" [class.ellipsis-scroll]="!ellipsis" s>
            {{ work.description }}
          </div>
        </ng-template>

        <ion-card-header>
          <div class="caret"><i class="fas fa-caret-right"></i></div>

          <ion-card-subtitle style="white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;">{{ work.author_nickname }}</ion-card-subtitle>

        </ion-card-header>

        <div class="categories">
          <ng-container *ngFor="let category of work.genres">
            <ion-chip>
              <ion-label color="secondary">{{ category.name}}</ion-label>
            </ion-chip>
          </ng-container>
        </div>
      </div>
    </div>
  </ion-card>
  <br>
</div>

我的应用程序性能也很慢。切换选项卡时，看看它们的动画。

这里有一个视频可以更好地理解：https://youtu.be/J_Vl7D10uWY

我觉得是我的书卡组件导致了性能问题，但我不知道为什么。难道是因为我有太多的 if 语句来应用不同的类或显示不同的东西？

谢谢！

Answer 1

好的，正如我所怀疑的，问题出在我的组件和这个库的使用上，它检测到我的视图的任何变化并重新计算省略号：

https://github.com/lentschi/ngx-ellipsis

Answer 2

试着去掉这条线

 response.forEach((work: Work) => this.works.push(work));

从您的服务中定义返回类型并执行此操作；

this.works = response;

此外，在渲染大量数据时，请考虑在 ngFor 循环中使用 trackBy。

你可以参考这个arcticle