解析大量Json时的角度生命周期钩子(Angular life

解析大量Json时的角度生命周期钩子(Angular life-cycle hook when parsing large quantity of Json)

我使用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的UI是之后5秒多没有完全更新。 如何在UI完成时得到通知，以便我可以隐藏装载轮？

I am using Angular to query a java backend that returns 1000 json objects, these then get parsed into a HTML table:

<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>

My question is, I want to show a loading wheel when the user does a search and have this disappear when the Json is returned and is parsed into the table - the query returns pretty quickly but as there is a lot of parsing Json the UI is not fully updated for 5+ seconds afterward. How can I be notified when the UI completes so I can then hide the loading wheel?

最满意答案

您需要为show创建服务并隐藏加载螺旋，如：

@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

You need to create service for show and hide loading spiral like:

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

now you can use this service in your component where you call in your function like:

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(); } ) }

In your HTML file add

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

add css for loader id