Infinite Scroll with Angular and Firebase

المكتبة: 

https://github.com/orizens/ngx-infinite-scroll

https://stackblitz.com/edit/demo-virtual-infinite-scroll?file=src%2Fapp%2Fapp.component.ts

فيديو يوضح المثال:

كانت تجربتي الأولى لهذه المكتبة في 12 أغسطس 2024 - وكانت تجربة فاشلة إلى حدٍ كبير ولكن فيها بعض الثمرات:
1- توجد مكتبة أخرى باسم CDK Virtual Scroll من الممكن أن نحاول أن نستخدمها مستقبلاً.

2- الكلمة المفتاحية الأفضل للبحث: using infinite-scroll for sql database in angular.

3- بناءاً على الكلمة السابقة فالنص الأفضل للبحث المستقبلي هو: using CDK Virtual Scroll for sql database in angular

4- أمر الـ SQL الأفضل للتجربة هو: const query = `SELECT * FROM items LIMIT ${limit} OFFSET ${offset}`;

5- using CDK Virtual Scroll for sql database in angular as Infinite Scroll


أفضل نتيجة تم الوصول لها هي: https://g.co/gemini/share/fae0a723ddff

  items$: any[] = [];

  page = 1;

  pageSize = 50;

  ngOnInit() {

    this.loadData();

  }

  loadData() {

    this.maintenancesService._getMultiByStatusAndTech(3, this.page, this.pageSize, 'OPEN')

      .subscribe(response => {

        this.items$ = this.items$.concat(response);

      });

  }

  trackByFn(index: number, item: any) {

    this.maintenancesService._getMultiByStatusAndTech(3, index, this.pageSize, 'OPEN')

    .subscribe(response => {

      this.items$ = this.items$.concat(response);

    });

        return item.id; // Replace with your unique identifier

  }

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">

    <div *cdkVirtualFor="let item of items$;let i = index" class="example-item">{{i+1}}-{{item.subject || 'Loading...'}}</div>

</cdk-virtual-scroll-viewport>

  .example-viewport {

    height: 200px;

    width: 200px;

    border: 1px solid black;

  }

 

  .example-item {

    height: 50px;

  }

التجربة الأفضل والناجحة تماماً:

<cdk-virtual-scroll-viewport [itemSize]="30" class="example-viewport">

     <div *cdkVirtualFor="let item of _items" class="example-item">

         {{item.subject}} {{itemRendered(item)}}

     </div>

</cdk-virtual-scroll-viewport>

<button (click)="addMoreItems()">add more items</button>

.example-viewport {

    height: 200px;

    width: 200px;

    border: 1px solid black;

}

.example-item {

    height: 50px;

}

_items = [];

  lastItem = 0;

  page: number = 0;

  addMoreItems() {

    this.page = this.page + 1;

    console.log(this.page);

    let y = [];

    y.push(...this._items);

    // for (let index = 0; index < 50; index++) {

    //   y.push(this.lastItem++);

    // }

    this.maintenancesService._getMultiByStatusAndTech(3, 'OPEN', this.page, 20).subscribe(res => {

      this._items = [...y, ...res];

    });

    this._items = y;

  }

  lastRefreshItems = -1;

  itemRendered(item: number) {

    var y = this._items.indexOf(item);

    if (y == this._items.length - 1) {

      if (y == this.lastRefreshItems)

        return;

      this.lastRefreshItems = y;

      console.log('want refresh');

      setTimeout(() => {

        console.log('refresh');

        this.addMoreItems();

      }, 100);

    }

  }

  ngOnInit() {

    this.addMoreItems();

  }

  async _findMultiByStatusAndTech(id: number, status: string, skip: number, take: number):

    Promise<any> {

    return await this.maintenanceRepository

      .createQueryBuilder('maintenance')

      .leftJoinAndSelect('maintenance.asset', 'asset')

      .leftJoinAndSelect('maintenance.requester', 'requester')

      .leftJoinAndSelect('maintenance.technician', 'technician')

      .leftJoinAndSelect('maintenance.classification', 'classification')

      .leftJoinAndSelect('maintenance.branch', 'branch')

      .leftJoinAndSelect('maintenance.department', 'department')

      .leftJoinAndSelect('maintenance.group', 'group')

      .leftJoinAndSelect('maintenance.attachments', 'attachments')

      .where('maintenance.status = :status', { status })

      .andWhere(`maintenance.technician.id = ${id}`) // Use .andWhere to add additional conditions

      .andWhere(`maintenance.created_by IS NOT NULL`) // Use .andWhere to add additional conditions

      .orderBy('maintenance.id', 'DESC') // Ensures consistent ordering by ID      

      .take(take) // Equivalent to LIMIT

      .skip(skip) // Equivalent to OFFSET

      .getMany(); // Or use .getRawMany() if you want raw results

  }