如何在 *ngFor 完成渲染时显示加载

Question

我有一个可折叠面板，需要一些时间才能打开，因为它必须渲染大约 10K 到 80K 记录，为此我使用了 *ngFor。由于渲染需要花费大量时间，因此它看起来就像应用程序崩溃/卡住一样。所以我想展示我们产品中的装载机。

我试图将子组件的值发送到我想要显示加载程序的父组件（即在子组件完成渲染时阻止父组件）。

下面是我的 HTML 代码

  <li class="panel" *ngFor="let filter of filterData; let ind = index" id="qa-{{filter.NameFilterlet filter of filterData; let ind = index" id="qa-{{filter.NameFilter}}" >
    <div class="filter-list__cont-menu-item-name" [ngClass]="{'active': filter.NameFilter === selectedTitleFilter || resultFilter}"
       data-toggle="collapse" role="tab" [attr.data-target]="'#filter' + ind" aria-expanded="false"
      (click)="onTitleFilter(filter.NameFilter)">
      <fa-icon class="caretr" [icon]="['fas', 'caret-right']"></fa-icon>
      <span class="main-name">{{getNameFilter(filter)}}</span>
      
      
    
    </div>
    <div class="collapse filter-list__cont-sub-menu" [ngClass]="{'in': stateOpen}" role="tabpanel" id="filter{{ind}}"
      aria-expanded="false">
      <ul>
        <li *ngFor="let subFilter of filter.SubFilters" id="qa-{{subFilter.Name}}" (click)="onFilter(subFilter.Name, subFilter.Id, filter.NameFilter)"><div class="subFilter-name" data-toggle="tooltip" data-placement="right" title="{{subFilter.Name}}">{{subFilter.Name}}</div></li>
      </ul>
    </div>
  </li>

下面是我的 component.ts 文件代码，用于单击图块，该图块会展开以显示记录。我曾尝试在开始时将值设置为 TRUE，在结束时将值设置为 FALSE，但由于它是一种方法，所以 TRUE 值会在一秒钟内变为 FALSE。

  onTitleFilter(titleFilter: string) {
     this.startLoading.emit(true)
    if (!this.resultFilter) {
      this.selectedTitleFilter = this.selectedTitleFilter === titleFilter ? '' : titleFilter;
    }
    this.startLoading.emit(false)
  }

当 *ngFor 完成渲染时，我该怎么做才能显示加载程序？有什么解决办法吗？

Answer 1

Angular hookngAfterViewInit似乎是处理这个问题的好地方。但是，您将ExpressionChangedAfterItHasBeenCheckedError在控制台中遇到这种烦人的情况。实现您所需的可靠方法是利用last上的变量*ngFor。

这个已经回答的SO 查询显示了如何做到这一点。