कोणीय में बड़ी सूची प्रस्तुत करने के 3 तरीके

• वर्चुअल स्क्रॉलिंग (कोणीय सीडीके का उपयोग करके)।
• मैनुअल प्रतिपादन।
• प्रगतिशील प्रतिपादन।

वर्चुअल स्क्रॉलिंग

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

सारांश