3 Möglichkeiten, große Listen in Angular zu rendern

• Virtuelles Scrollen (mit Angular CDK).
• Manuelles Rendern.
• Progressives Rendern.

Virtuelles Scrollen

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 ( ). , , , , . — .
• — , .
• Es gibt einige Probleme mit der Zugänglichkeit und Benutzerfreundlichkeit des Inhalts einer Liste mit virtuellem Bildlauf. Versteckte Elemente werden nicht gerendert. Dies bedeutet, dass sie für Bildschirmleser nicht verfügbar sind und mit Standardbrowsermechanismen nicht auf der Seite gefunden werden können.

• In diesem Fall, wenn Sie Listen anzeigen möchten, deren Größe nicht im Voraus bekannt ist oder die sehr groß sein können (nach einer groben Schätzung Listen mit mehr als 5.000 Elementen, dies hängt jedoch stark von der Komplexität der einzelnen Elemente ab).
• Für den Fall, dass Sie endloses Scrollen organisieren müssen.

Manuelles Rendern

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

Progressives Rendern

• Auf diese Weise setIntervalerstellen wir zunächst alle 10 ms einen regulären Aufruf einer Funktion, die beim Aufruf 500 Elemente rendert.
• Nachdem alle Elemente abgeleitet wurden, die wir anhand der Analyse des Index des aktuellen Elements ermitteln, stoppen wir den regulären Funktionsaufruf und unterbrechen den Zyklus.

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

Zusammenfassung