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

Question

我使用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完成时通知我,然后我可以隐藏加载轮？

Answer 1

您需要为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>

为loader id添加css