Accessing Data from Database for display - html

Question

UPDATE: I figure it would be easier if I just made a Gist to share with the code that's being utilized in this.
CODE: https://gist.github.com/strawmr/15a22bf5118642ff130f215511982b80
ORIGINAL: I'm working on a new system at work that will allow data to be read and updated directly to a database. Part of this involves Angular 2 and Typescript.
During the development I've run into an issue with it not loading the information. It shows me solely the "loading incidents" that is used as a placeholder inside the element tags.
What could I be missing that is causing the data to not appear or the code itself to not function properly? Below are the code snippets.
incident.service.ts
import { Injectable } from "#angular/core";
import { Http, Response } from "#angular/http";
import { SpringfieldService } from "./springfield.service";
import "rxjs/add/operator/map";
import { Incident } from "./incident";
#Injectable()
export class IncidentService extends SpringfieldService {
private url = this.baseUrl + "Incident";
constructor(private http: Http) {
super();
}
getAll() {
return this.http.get(this.url)
.map((res: Response) => res.json());
}
getIncident(incidentId: number) {
return this.http.get(this.url, incidentId)
.map((res: Response) => res.json());
}
saveIncident(incident: Incident) {
return this.http.put(this.url, incident)
.map((res: Response) => res.json());
}
addIncident(incident: Incident) {
return this.http.post(this.url, incident)
.map((res: Response) => res.json());
}
deleteIncident(incident: Incident) {
return this.http.delete(this.url, incident)
.map((res: Response) => res.json());
}
}
incident.component.ts
import { Component } from "#angular/core";
import { IncidentService } from "./incident.service";
import { Incident } from "./incident";
#Component({
selector: "rpcs-incident",
templateUrl: "/app/incident.component.html",
providers: [IncidentService]
})
export class IncidentComponent {
private incidents: Incident[];
constructor(incidentService: IncidentService) {
incidentService.getAll()
.subscribe(
response => this.incidents = response,
err => console.log("Error: ", err),
() => console.log("Fetch incidents complete.", this.incidents)
);
}
}
incident.component.html
<div class="incidentarticle" *ngFor="let incident of incidents; let i = index; trackBy: incidentId">
<h2>
{{incident.IncidentId}}
<span class="glyphicon glyphicon-edit" (click)="onEdit()"></span>
</h2>
<h3 *ngIf="incident.DateReported != null">Start: {{incident.DateReported | date:'medium'}}</h3>
<!--<div> <span>Applies To:</span> {{newsitem.AppliesTo}}</div>-->
<div>
<span>Description:</span> {{incident.IncidentDescription}}
</div>
<!--<div>
<span>Action Required:</span> {{newsitem.ActionRequired}}
</div>
<div><span>For Further Information:</span> {{newsitem.AdditionalInfo}}</div>-->