解析大量 Json 时的 Angular 生命周期钩子答案

【问题标题】：Angular life-cycle hook when parsing large quantity of Json解析大量 Json 时的 Angular 生命周期钩子
【发布时间】：2017-11-14 14:22:51
【问题描述】：

我正在使用 Angular 查询返回 1000 个 json 对象的 java 后端，然后将这些对象解析为 HTML 表：

<tr class="businessItemList" *ngFor="let x of businessItemsInitialSearchResults">
    <td *ngFor="let y of headingsBeingDisplayed">
      <a [routerLink]="['/businessItem', x.uniqueNumber]">{{x[y.propertyName]}}</a>
      </td>
  </tr>

我的问题是，我想在用户进行搜索时显示一个加载轮，并在返回 Json 并解析到表中时让它消失 - 查询返回得很快，但是因为解析 Json 有很多用户界面在 5 多秒后没有完全更新。如何在 UI 完成时收到通知，以便我可以隐藏加载轮？

【问题讨论】：

标签： json angular parsing html-parsing

【解决方案1】：

您需要为显示和隐藏加载螺旋创建服务，例如：

@Injectable()
export class ShareService {
    isLoading:boolean;
    showLoader(){
        return this.isLoading=true;
    }
    hideLoader(){
        return this.isLoading=false;
    }
}

现在您可以在调用函数的组件中使用此服务，例如：

loadData(){  
    this.isLoading = this.shareService.showLoader();
    this.dataService.getAllData()
        .subscribe(
            news=>{
              this.data=data;               
              this.isLoading = this.shareService.hideLoader();
            },err=>{
              alert("Something went wrong");
              this.isLoading = this.shareService.hideLoader();
            }
        )
  }

在您的 HTML 文件中添加

<div id="loader" *ngIf="isLoading"></div>

为加载器id添加css

【讨论】：

【解决方案2】：

比较businessItemsInitialSearchResults的索引和长度为

<div ng-if="(businessItemsInitialSearchResults.length-1) != $index"> 
    <img src="../Images/load.gif" style="width:359px;height:349px;align-content:center" /> 
</div>

【讨论】：