typescript - Bagaimana cara memuat dan menampilkan sejumlah besar data dalam tabel menggunakan Angular 2?

Saya sedang mengembangkan aplikasi Angular 2 yang harus menampilkan sejumlah besar data dalam tabel yang dapat digulir.

Data tersebut ada dalam sebuah array di kelas komponen saya:

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'
           });
        }
    }
}

Kemudian data dimuat melalui ngFor di tata letak saya:

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

Misalnya, itu harus memuat data dalam tabel dengan 10.000, mungkin, 20.000 baris, dan sekitar 10 kolom. Masalahnya di sini adalah sangat lambat untuk dimuat dan setelah dimuat berjalan dengan lag yang sangat parah.

Saya tidak bisa menggunakan paginasi dalam hal ini dan gulirannya wajib. Saya ingin mempertahankan ukuran dan posisi gulir seolah-olah semua data sudah dimuat meskipun saya perlu melakukan trik seperti memuat hanya sebagian data.

Saya ingin tahu apa praktik terbaik untuk melakukan tugas ini tanpa penurunan kecepatan.

Jawaban #1

Saya akan menyarankan Anda untuk mengubah tabel Anda menjadi sebuah komponen, dan mengubah strategi deteksi perubahan menjadi "on push". Dengan cara itu, Angular akan mengurangi biaya kinerja.

Jawaban #2

Seperti yang Anda sebutkan, ini adalah sejumlah besar data dan akan mahal bagi pengguna karena browser harus meminta dan mengunduh sejumlah besar data.

Saya akan menyarankan untuk membagi data menjadi subbagian dan menambahkan paginasi. Tampilkan hanya sekitar 100 catatan per halaman. Ini akan meningkatkan keterbacaan dan pengalaman pengguna juga.

Di Angular 1.x.x, Anda bisa menggunakan filter limitTo untuk membatasi hasil. Di Angular 2.x.x, Anda bisa menggunakan filter slice.

Template terbaru Anda mungkin terlihat seperti ini. Saya tidak bisa menjamin ini akan berhasil, tetapi ini akan menunjukkan pendekatan dasarnya.

      <th>Id</th>
      <th>Name</th>
      <th order="desc">Address</th>
      <th numeric>Phone</th>
      <th>Ações</th>

      <tr *ngFor="let client of clients | slice:pageStart:100">
        <td>{{ client.id }}</td>
        <td>{{ client.name }}</td>
        <td>{{ client.address }}</td>
        <td>{{ client.phone}}</td>
        <td>Ações</td>
      </tr>

      <button *ngIf="pageStart >= 100" (click)="prevData()">Previous</button>
      <button *ngIf="pageStart < clients.length" (click)="NextData()">Next</button>
    </data-table>

Komponen itu akan terlihat seperti ini

export class DataTable {
  // Code omitted for brevity
  pageStart = 0;

  nextData() {
    this.pageStart += 100;           // Get the next 100 records
  }

  prevData() {
    this.pageStart -= 100;          // Get the previous 100 records
  }
}

Sebagai alternatif, Anda bisa menggunakan beberapa bentuk gulir tak terbatas.

Artikel terkait