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

Question

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

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

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

Answer 1

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

Answer 2

正如您所提到的，这是相当多的数据，并且对于用户来说会很昂贵，因为浏览器必须请求和下载大量数据。

\n\n

我建议将数据分解为小节并添加分页。每页仅显示约 100 条记录。它将提高可读性和用户体验。

\n\n

在 Angular 1.xx 中，您可以使用limitTo过滤器来限制结果。在 Angular 2.xx 中，您可以使用slice过滤器。

\n\n

您更新后的模板可能看起来像这样。我不能保证这会起作用，但它会展示基本方法。

\n\n

\n\n

      <th>Id</th>\n      <th>Name</th>\n      <th order="desc">Address</th>\n      <th numeric>Phone</th>\n      <th>A\xc3\xa7\xc3\xb5es</th>\n\n      <tr *ngFor="let client of clients | slice:pageStart:100">\n        <td>{{ client.id }}</td>\n        <td>{{ client.name }}</td>\n        <td>{{ client.address }}</td>\n        <td>{{ client.phone}}</td>\n        <td>A\xc3\xa7\xc3\xb5es</td>\n      </tr>\n\n      <button *ngIf="pageStart >= 100" (click)="prevData()">Previous</button>\n      <button *ngIf="pageStart < clients.length" (click)="NextData()">Next</button>\n    </data-table>\n

\n\n

该组件看起来像这样

\n\n

export class DataTable {\n  // Code omitted for brevity\n  pageStart = 0;\n\n  nextData() {\n    this.pageStart += 100;           // Get the next 100 records\n  }\n\n  prevData() {\n    this.pageStart -= 100;          // Get the previous 100 records\n  }\n}\n

\n\n

或者，您可以使用某种形式的infinite scrolling.

\n