sending multiple requests when using ag-grid and angular 2

I'm retrieving data from a ASP.NET Webapi and populating an ag-grid in an angular 2 app.

The data gets populated in the ag-grid, but I noticed the requests in the network tab of the developers tool getting inundated with requests and eventually getting a timeout. I'm not sure why this is happening. It seems like the web api gets called infinitely.

Here's the angular code:

event-details.component.ts

import { IEvent } from 'model/event.model';
import { EventService } from 'services/event.service';
import { Component, OnInit } from '@angular/core';
import {GridOptions} from "ag-grid/main";

@Component({
  selector: 'event-details',
  templateUrl: './event-details.component.html',
  styleUrls: ['./event-details.component.css']
 })
export class EventDetailsComponent implements OnInit {
events: IEvent[];
gridOptions: any = [];
errorMessage: string;
error: any;

constructor(private eventService: EventService) {
  this.gridOptions = <GridOptions>{};
}

columnDefs() {
return [
    {headerName: "Event ID", field: "id", width: 100},
    {headerName: "Event Name", field: "name", width: 100},
    {headerName: "Event Date", field: "date", width: 100},
    {headerName: "Event Time", field: "time", width: 100},
    {headerName: "Event Price", field: "price", width: 100}
  ]
}

ngOnInit() {
  this.eventService.getEvents().subscribe(
    events =>  {
      this.events = events, 

    this.gridOptions = {
        rowData: this.events,
        columnDefs: this.columnDefs()
      };
    },
    error => this.errorMessage = <any>error);
}

onGridReady(params) {
    params.api.sizeColumnsToFit();
}

}

Here is the code for event.service.ts:

import { Injectable } from "@angular/core";
import  {Observable} from "rxjs/Rx";
import { Http } from "@angular/http";
import { IEvent } from 'model/event.model';
import 'rxjs/Rx';

@Injectable()
export class EventService {

  constructor(private http: Http) {}

  getEvents(): Observable<IEvent[]> {
    return this.http.get("/api/events")
        .map((response: any) => {
            return response.json();
        })
        .do(data => console.log(JSON.stringify(data)))
        .catch(this.handleError);
   };

  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }

}