我使用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
更多推荐
发布评论