Run loadingController while *ngFor


#1

Hi all ! Could anyone suggest please … is it possible to add loadingController when we go on ion-segment while *ngFor working ?

  <div>
    <ion-segment [(ngModel)]="category">
      <ion-segment-button value="errors" (ionSelect)="CurrentSegment()">
        Errors
      </ion-segment-button>
      <ion-segment-button value="retrieve" (ionSelect)="CurrentSegment()">
        Retrieve
      </ion-segment-button>
      <ion-segment-button value="insertion" (ionSelect)="CurrentSegment()">
        Insertion
      </ion-segment-button>
      <ion-segment-button value="all" (ionSelect)="CurrentSegment()">
        All
      </ion-segment-button>
    </ion-segment>
  </div>
  <div [ngSwitch]="category">
    <ion-list *ngSwitchCase="'errors'">
      <ion-item class="logs-item log-error" *ngFor="let item of Errors;let i=index" (click)="logView(0,i)">
          <div class="logs-head">{{item.date}}</div>
          <div class="logs-body">{{item.message}}</div>
      </ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'retrieve'">
      <ion-item class="logs-item log-retrieve" *ngFor="let item of Retrieve;let i=index" (click)="logView(1,i)">
          <div class="logs-head">{{item.date}}</div>
          <div class="logs-body">{{item.message}}</div>
      </ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'insertion'">
      <ion-item class="logs-item log-insertion" *ngFor="let item of Insertion;let i=index" (click)="logView(2,i)">
          <div class="logs-head">{{item.date}}</div>
          <div class="logs-body">{{item.message}}</div>
      </ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'all'">
      <ion-item class="logs-item log-{{item.type}}" *ngFor="let item of currentLogs;let i=index" (click)="logView(3,i)">
          <div class="logs-head">{{item.date}}</div>
          <div class="logs-body">{{item.message}}</div>
      </ion-item>
    </ion-list>
  </div>

#2

You should create the loadingCtrl in your components.ts file where you load the data, I guess.


#3

LoLStats, good day ! When I go on ion-segment-button I run ngSwitch. All data already in array ! Is it possible to run loadingCtrl while data retrieve from array ? When array has a lot of data … process take a lot of time before show all ion-list …


#4

Then you should use virtualscroll. Rendering shouldn’t take too much time.


#5

LoLStats, thanks. With out virtualscroll it not working like I want to do?


#6

Try it like this: http://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished

But I recommend to use virtualscroll. Try both and choose the best for you


#7

LoLStats, I will try … thanks for answer …