3 طرق لتقديم قوائم كبيرة في الزاوي

• التمرير الظاهري (باستخدام Angular CDK).
• التقديم اليدوي.
• التقديم التدريجي.

التمرير الافتراضي

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 ( ). , , , , . — .
• — , .
• هناك بعض المشكلات المتعلقة بإمكانية الوصول وسهولة استخدام محتويات القائمة مع التمرير الظاهري. لا يتم عرض العناصر المخفية - وهذا يعني أنها لن تكون متاحة لقارئي الشاشة ، وأنه لا يمكن العثور عليها في الصفحة باستخدام آليات المتصفح القياسية.

• في هذه الحالة ، إذا كنت ترغب في عرض القوائم التي لا يُعرف حجمها مسبقًا ، أو تلك التي يمكن أن تكون ضخمة (وفقًا لتقدير تقريبي ، القوائم التي تحتوي على أكثر من 5 آلاف عنصر ، ولكن هذا يعتمد بشكل كبير على مدى تعقيد كل عنصر).
• في حال كنت بحاجة إلى تنظيم التمرير اللانهائي.

التقديم اليدوي

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

التقديم التدريجي

• أولاً ، باستخدام هذا setInterval، نقوم بإنشاء استدعاء منتظم كل 10 مللي ثانية لدالة تعرض 500 عنصر عند الاستدعاء.
• بعد استنتاج جميع العناصر ، التي نحددها بناءً على تحليل فهرس العنصر الحالي ، نوقف استدعاء الوظيفة المنتظم ونقاطع الدورة.

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

ملخص