Блог

Я использую функцию с возможностью выбора ионной с функцией бесконечной прокрутки, проблема, с которой я сталкиваюсь, заключается в загрузке новых данных страницы, прокрутка с возможностью выбора ионной перемещается наверх. Этого не должно быть, пользователь должен увидеть появление новых элементов и продолжить прокрутку в обычном режиме.

     <ion-item lines="none">
          <ionic-selectable #nationalityRef closeButtonSlot="end" formControlName="nationalities"
                  [items]="nationalities?.data" itemValueField="id" itemTextField="nationality" [canSearch]="true"
                  [searchPlaceholder]="'Profile.Form.Nationality' | translate" [hasInfiniteScroll]="true"
                  (onSearch)="searchThroughRecords($event, natl, false, 'nationality')"
                  (onInfiniteScroll)="infinitescroll($event, natl, true)" class="v2"
                  (onClose)="selectClosed(nationalityRef)">
                  <ng-template ionicSelectableTitleTemplate>
                    {{'Profile.Form.Nationality' | translate}}
                  </ng-template>
                  <ng-template ionicSelectableCloseButtonTemplate>
                    <ion-icon src="../../../assets/icon/close.svg"></ion-icon>
                  </ng-template>
                </ionic-selectable>
    </ion-item>
 

и код класса:

 
    infinitescroll(event, record: PaginatedResponse < any >, fn: CallableFunction, type ?: string, index ?: number) {
        const text = (event.text || '').trim().toLowerCase();
        // There're no more ports - disable infinite scroll.
        if (record.meta.current_page > record.meta.last_page) {
            event.component.disableInfiniteScroll();
            return;
        }
    
        const payload: any = {
            per_page: NationalityPerPage, page: record.meta.current_page, sort: 'title',
            direction: 'asc', nationality_id: null
        };
    
        fn(payload).subscribe((items: PaginatedResponse<NationalitiesModel>) => {
            record.data = event.component.items.concat(items.data);
            event.component.items = record.data;
            event.component.endInfiniteScroll();
            record.meta.current_page  ;
        });
    }