Angular 4：如何在网格中处理和显示10000条记录

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

感谢您的所有投入。按照我的方式，我做到了这一点。

数据网格代码

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

打字稿代码

reportResult = [];
responseResult = [];
isFinished = false;
onScroll () {
    if(!this.isFinished) {
      const condition = this.dbQuery + '.skip(' + this.reportResult.length + ').limit(100)';
      this.execute(condition);
    }
  }
execute(qry){
const that = this;
$('#loading').show();
    this.reportService.getReportData(qry).then((data: any) => {
      this.isPageValid = true;
      $('#loading').hide();
      try{
        if(data.operation == "SUCCESS"){
          if(data.data === "]")
          {
            that.toastr.warning("No results found, please refine your conditions!","Report");
          }else{
            that.responseResult = JSON.parse(that.stringifyJson(data));
            if(that.responseResult.length < 100) { that.isFinished = true; }
            for(let i = 0; i < that.responseResult.length; i++) {
              that.reportResult.push(that.responseResult[i]);
            }
          }
        } else {
          that.toastr.warning("Data size is larger, please refine your conditions!","Report");
        }
      }
      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");
    });  }  

此外，此链接有助于使用无限滚动。

Angular 4 with ngx 无限滚动

Answer 2

您可以使用可以帮助您的第三方库，我建议将 ag-grid 用于 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=previewhttps://www.ag-grid.com/angular-more-details/

我还建议不要在Angular App中使用jQuery。

Answer 3

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

没有人能够一次分析 10000 条记录(至少没有人(，因此将这些记录分成小部分并根据用户兴趣需求进行过滤是很有意义的。