Question

我在Angular前提调用中从后端获得了超过10000条记录。我正在使用Premise在服务中调用API方法，并在组件中订阅相同的内容并获取太多记录作为结果集。

问题是我的UI无法处理这么多记录，因此浏览器完全被挂起。那么任何人都可以告诉我如何处理这种情况吗？

这是我的示例代码，其中我获得了超过10000条记录。

this.myService.getData(this.mongodbQuery).then((data: any) => {
  try{
    if(data.operation == "SUCCESS"){
      if(data.data === "]")
      {
        that.toastr.warning("No results found, please refine your conditions!","Report");
      }else{
        that.reportResult = JSON.parse(that.stringifyJson(data));
      }          
    }
    else{
      that.toastr.warning("Data size is larger, please refine your conditions!","Report"); // Here it doesn't give me result because records are more than 10000
    }
  }
  catch(err){
    $('#loading').hide();
    that.toastr.warning("Data size is larger, please refine your conditions!","Report");
  }
},function(err){
  $('#loading').hide();
  that.toastr.warning("Data size is larger, please refine your conditions!","Report");
});

Answer 1

您可以使用可以帮助您的第三方库，我建议使用ag-grid for Angular 2/4/5 / X

https://www.ag-grid.com/angular-more-details/

对于您的示例，为了能够加载100000行，您可以使用他们称之为“无限滚动”的内容示例和详细信息：

您可以使用可以帮助您的第三方库，我建议将ag-grid用于Angular 2/4/5 / X

npm install ng-grid

https://plnkr.co/edit/?p=preview
https://www.ag-grid.com/angular-more-details/

我也建议不要在你的Angular App中使用jQuery。

Answer 2

嗯，你能用分页吗？如果您请求的API支持它（可能确实如此），您可以一次请求更少的记录。使用分页或无限加载器仅显示这些较小的数据块时。

没有人能够同时分析10000条记录（至少不是人类），因此将这些记录分成小部分并过滤用户兴趣需求是很有意义的。

Answer 3

感谢您的所有投入。按照我的方式实现了这一目标。

数据网格代码

std::move

TypeScript代码

 <div class="panel-body" style="overflow-y:scroll;height:20em;width:100%;"
      infiniteScroll
      [infiniteScrollDistance]="5"
      [infiniteScrollUpDistance]="2"
      [infiniteScrollThrottle]="300"
      (scrolled)="onScroll()"
      [scrollWindow]="false">
        <table class="table table-hover table-striped table-sortable">
          <thead>
              <tr>
                  <th *ngFor="let column of columns" >
                      {{column.display}}
                  </th>
              </tr>
          </thead>
          <tbody>
              <tr *ngFor="let row of reportResult">                      
                  <td *ngFor="let column of columns">
                      {{row[column.variable]}}
                  </td>
              </tr>
          </tbody>
        </table>
 </div>

此链接也有助于使用infiniteScroll。

Angular 4 with ngx infinite scroll

Angular 4：如何处理＆amp;在网格

3 个答案: