Can I make an ngFor repeath specifict times of an array? Ionic

Question

I have an ion-list that shows n objects of an array. I'm using *ngFor to show them. The problem is that the array will have n quantity of objects.It could be 10 objects or 2000. I would like to show the first 30 objects, then, use an infinite scroll and show the next 30. How could I do it? This is my code:

    <div *ngFor="let key of objectKeys(message)">
      <ion-card class="{{val.Status}}" *ngFor="let val of message[key]"> 
        <ion-card-header class="headerClass">
          <ion-row>
            <ion-col size="11"><ion-label class="titulo">{{val.Permiso}}</ion-label></ion-col>
            <ion-col *ngIf="val?.Status == 'Autorizado'" size="1" ><ion-icon color="success" style="zoom:1.5;" name="checkmark-circle-outline"></ion-icon></ion-col>
            <ion-col *ngIf="val?.Status == 'Rechazado'" size="1"><ion-icon color="danger" style="zoom:1.5;" name="close-circle-outline"></ion-icon></ion-col>
            <ion-col *ngIf="val?.Status == 'Pendiente'" size="1"><ion-icon color="warning" style="zoom:1.5;" name="help-circle-outline"></ion-icon></ion-col>
          </ion-row>
        </ion-card-header> 
        <ion-card-content>
          <ion-row>
            <ion-col size="12" ><b>Fecha de inicio: </b> {{val.FechaInicio | date: 'd/M/yyyy'}}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col *ngIf="val?.FechaFin != null" size="12" ><b>Fecha de termino: </b> {{val.FechaFin | date: 'd/M/yyyy'}}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="6"><b>Hora de inicio:</b> {{val.HoraInicio}}</ion-col>
            <ion-col  size="6"><b>Hora termino:</b> {{val.HoraFin}}</ion-col>
          </ion-row>
          <ion-row *ngIf="val?.FechaReanudacion != null">
            <ion-col size="12" ><b>Fecha reanudacion: </b> {{val.FechaReanudacion | date: 'd/M/yyyy'}}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col *ngIf="val?.Status == 'Rechazado'"  size="12" ><b>Motivo:</b> {{val.Comentarios}}</ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </div>
  </div> 

This is how a fill my array: 

MisPermisos(datos){  
    this.proveedor.MostrarPermisos(datos).subscribe(
      async (dataReturnFromService2)=>{
        this.dataFromService2 = (dataReturnFromService2);
        let obj2 = JSON.parse(this.dataFromService2);
        if((dataReturnFromService2) == '{"Table":[]}'){
          this.noHayPermisos();
        }
        else{
          this.messages = [obj2] ;
          this.keys = Object.keys([obj2]);
          this.prueba = (obj2.Table[0].Status);  
        }
      }
    )
  }