3 cara membuat daftar besar di Angular

• Pengguliran virtual (menggunakan CDK Angular).
• Render manual.
• Render progresif.

Pengguliran virtual

npm i @angular/cdk

import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
 ...
 imports: [ ScrollingModule, ...]
})
export class AppModule {}

<cdk-virtual-scroll-viewport itemSize="50">
 <div *cdkVirtualFor="let item of items">
   {{ item }}
 </div>
</cdk-virtual-scroll-viewport>

• , , . , . , Autocomplete ( ). , , , , . — .
• — , .
• Ada beberapa masalah dengan aksesibilitas dan kemudahan penggunaan isi daftar dengan pengguliran virtual. Elemen tersembunyi tidak dirender - ini berarti bahwa mereka tidak akan tersedia untuk pembaca layar, dan bahwa mereka tidak dapat ditemukan pada halaman menggunakan mekanisme browser standar.

• Dalam hal itu, jika Anda ingin menampilkan daftar yang ukurannya tidak diketahui sebelumnya, atau yang bisa sangat besar (menurut perkiraan kasar, daftar yang mencakup lebih dari 5 ribu elemen, tetapi ini sangat tergantung pada kompleksitas setiap elemen).
• Jika Anda perlu mengatur pengguliran tanpa akhir.

Render manual

<tr 
*ngFor="let item of data; trackBy: trackById; let isEven = even; let isOdd = odd"
    class="h-12"
    [class.bg-gray-400]="isEven"
    [class.bg-gray-500]="isOdd"
>
  <td>
    <span class="py-2 px-4">{{ item.id }}</span>
  </td>

  <td>
    <span>{{ item.label }}</span>
  </td>

  <td>
    <a>
      <button class="py-2 px-4 rounded (click)="remove(item)">x</button>
    </a>
  </td>
</tr>

<tbody>
  <ng-container #itemsContainer></ng-container>
</tbody>
<ng-template #item let-item="item" let-isEven="isEven">
  <tr class="h-12 "
      [class.bg-gray-400]="isEven"
      [class.bg-gray-500]="!isEven"
  >
    <td>
      <span class="py-2 px-4">{{ item.id }}</span>
    </td>

    <td>
      <span>{{ item.label }}</span>
    </td>

    <td>
      <a>
        <button class="py-2 px-4 rounded" (click)="remove(item)">x</button>
      </a>
    </td>
  </tr>
</ng-template>

@ViewChild('itemsContainer', { read: ViewContainerRef }) container: ViewContainerRef;
@ViewChild('item', { read: TemplateRef }) template: TemplateRef<any>;

private buildData(length: number) {
  const start = this.data.length;
  const end = start + length;

  for (let n = start; n <= end; n++) {
    this.container.createEmbeddedView(this.template, {
      item: {
        id: n,
        label: Math.random()
      },
      isEven: n % 2 === 0
    });
  }
}

Render progresif

• Pertama, menggunakan ini setInterval, kami membuat biasa, setiap 10 ms. Panggil ke fungsi yang membuat 500 elemen saat dipanggil.
• Setelah semua elemen disimpulkan, yang kami tentukan berdasarkan analisis indeks elemen saat ini, kami menghentikan pemanggilan fungsi reguler dan mengganggu siklus.

private buildData(length: number) {
  const ITEMS_RENDERED_AT_ONCE = 500;
  const INTERVAL_IN_MS = 10;

  let currentIndex = 0;

  const interval = setInterval(() => {
    const nextIndex = currentIndex + ITEMS_RENDERED_AT_ONCE;

    for (let n = currentIndex; n <= nextIndex ; n++) {
      if (n >= length) {
        clearInterval(interval);
        break;
      }
      const context = {
        item: {
          id: n,
          label: Math.random()
        },
        isEven: n % 2 === 0
      };
      this.container.createEmbeddedView(this.template, context);
    }

    currentIndex += ITEMS_RENDERED_AT_ONCE;
  }, INTERVAL_IN_MS);

Ringkasan