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之后5秒以上的UI未完全更新。如何在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

Answer 2

将businessItemsInitialSearchResults的索引和长度与

进行比较

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

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

2 个答案: