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

【问题标题】：how to show loading while *ngFor completes the rendering如何在 *ngFor 完成渲染时显示加载
【发布时间】：2021-06-29 08:18:55
【问题描述】：

我有一个可折叠的面板，它需要一些时间才能打开，因为它必须渲染大约 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 完成渲染时显示加载器？有什么解决办法吗？

【问题讨论】：

如果您在一个请求中渲染 10K 到 80K 记录，那么显然在浏览器中渲染需要一些时间。我建议你在这里使用分页以获得更好的性能..
如果不是分页，你可以使用这样的东西：material.angular.io/cdk/scrolling/overview
@NileshSonkusare 分页不是这里的选择。我们确实有页面加载的数据，给API带来的时间并不长，但是渲染却需要一些时间。
您可以为此使用@ViewChildren。请查看此链接：stackoverflow.com/a/49025047/6295845
您仍然可以在显示中使用分页，尤其是当您拥有有关页面加载的完整数据时。见 e。 G. 材料分页器。对我来说似乎是一个更好的选择，谁喜欢滚动 80k 条目...？

标签： angular typescript

【解决方案1】：

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

这已经回答SO query 显示如何做到这一点。

【讨论】：