I want ngFor to only return one random entry (using InfiniteScroll), is it possible?

I don't know if this was the best approach, but let me explain what I am doing.

I have a mobile app with ionic and angular. On it I have ngFor which takes data in observable and displays normally. I have set a condition that every 5 entries based on the ngFor index call a new ngFor in another one observable with declarations.

I would like this ad to only return a random entry using PIPE, but since I'm using InfiniteScroll, when it loads more data, it will remix all ads previously loaded.

Is this possible or would this be the best approach?

snippet of template

<div *ngFor="let item of produtos | async; let i = index">        
  <ion-card >
    <ion-item>
    {{ item.name }}
    </ion-item>
  </ion-card>

  <div *ngIf="( (i % 4 == 0) && ( x > 0 ) )" >    
    <ion-card >
      <ion-item *ngFor="let ads of allads |  onerandom" >
        <p>{{ ads?.adsCompany }}</p>
      </ion-item>
    </ion-card>
  </div>
</div>

      

        
        
        
      

    

Heres the PIPE

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'onerandom'
})
export class oneRandomObject implements PipeTransform {
    transform(values): any {       

            var myrand = Math.floor(Math.random() * values.length);
            var temparray = []
            temparray[myrand] = values[myrand];
            return temparray;
    }
}

      

        
        
        
      

    

I don't know how I can fix this so as not to rebuild the ads that I have already downloaded.