Delay ngFor loop

Question

I'm working on google maps directions, as per API, I can only make 10 request per sec.

Below is my code,

<div *ngFor="let place of outstation_routes" class="item">
  <figure class="wo-vehicles-img">
      <agm-map [zoom]="1">
          <agm-direction [origin]="place.origin" [destination]="place.destination">
          </agm-direction>
      </agm-map>
  </figure>
</div>

Issue now is, google is throwing this error message: "DIRECTIONS_ROUTE: OVER_QUERY_LIMIT:

So how can I overcome this issue, please guide

score 0 · Answer 1 · answered Apr 16 '21 at 07:17

See if this helps, Push data to the array after every 1 second.

getOutstationRoutes() {
    this.service
      .getOutstationRoutes()
      .pipe(
        mergeMap(x => from(x)),
        concatMap(x => of(x).pipe(delay(1000)))
      )
      .subscribe(res => {
        this.outstation_routes.push(res);
      });
 }

Stackblitz Example
Found the answer for pushing data from here

Delay ngFor loop

1 Answers1