typescript – 如何使用Angular 2在表中加载和显示大量数据?
发布时间:2020-12-17 17:54:15 所属栏目:安全 来源:网络整理
导读:我正在开发一个Angular 2应用程序,它必须在可滚动条中显示大量数据 表. 数据在我的组件类中的数组中: export class AppComponent { clients: any[] = []; constructor(){ for (var i = 0; i 10; ++i) { this.clients.push({ id: i,name: 'Client' + i,addre
我正在开发一个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将降低性能成本.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |