如何使用Angular 2在表中加载和显示大量数据？ [英] How to load and show large amounts of data in a table using Angular 2?

问题描述

我正在开发一个Angular 2应用程序，它必须在可滚动的
表中显示大量数据。

I'm developing an Angular 2 app which must to show a large amount of data in a scrollable table.

数据在数组中在我的组件类中：

The data is in a array in my component class:

export class AppComponent { 

    clients: any[] = [];

    constructor(){
        for (var i = 0; i < 10; ++i) {
           this.clients.push({
               id: i,
               name: 'Client' + i,
               address: 'Address of client ' + i,
               phone: '(51) 5454-4646'
           });
        }
    }
}

然后数据通过我的布局中的ngFor：

Then the data is loaded through a ngFor in my layout:

       <div style="height:600px;overflow:scroll">

          <data-table>

          <th>Id</th>
          <th>Name</th>
          <th>Address</th>
          <th numeric>Phone</th>

          <tr *ngFor="let client of clients">
            <td>{{ client.id }}</td>
            <td>{{ client.name }}</td>
            <td>{{ client.address }}</td>
            <td>{{ client.phone}}</td>
          </tr>

        </data-table>
      </div>  

例如，它必须在包含10.000，可能，20.000行和大约10的表中加载数据列。这里的问题是加载速度非常慢，加载后运行时间很长。

For example, It must load data in a table with 10.000, maybe, 20.000 rows, and around 10 columns. The problem here is that it is very slow to load and after load it runs with a terrible lag.

在这种情况下，我不能使用分页，滚动是强制性的。我想保持滚动拇指的大小和位置，就好像所有数据都已加载一样，即使我需要像加载部分数据那样做一些技巧。

I cannot use pagination in this case and the scroll is mandatory. I would like to keep the scroll thumb size and position as if all data is loaded even if I need to do a trick like load just part of the data.

我会想知道在没有减速的情况下完成这项任务的最佳方法是什么。

I would like to know what is the best praticce to do this task without slowdowns.

推荐答案

我会重新将你的表转换为组件，并将更改检测策略更改为on push。
这样，Angular将降低性能成本。

I would recomand you to convert your table into a component, and to change the change detection strategy into "on push". That way, Angular will reduce performance cost.

这篇关于如何使用Angular 2在表中加载和显示大量数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！