typescript – 如何使用Angular 2在表中加载和显示大量数据?

前端之家收集整理的这篇文章主要介绍了typescript – 如何使用Angular 2在表中加载和显示大量数据?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个Angular 2应用程序,它必须在可滚动条中显示大量数据
表.

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

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加载数据:

<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列的表中加载数据.这里的问题是加载速度非常慢,加载后运行时间很长.

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

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

解决方法

我会重新命令您将表转换为组件,并将更改检测策略更改为“on push”. 这样,Angular将降低性能成本.

猜你在找的Angularjs相关文章