Angular 2 / ASP.NET Core *ngFor loop issue - asp.net-core

Question

I am having problems displaying information from an database to the angular 2 *ngFor loop. This is my code so far:
.Net Core controller:
// GET: api/Hats
[HttpGet("GetHats")]
public IEnumerable<Hat> GetHats()
{
return _context.Hat;
}
hat-list.component.ts:
//Imports from #Angular
import { Component, OnInit } from '#angular/core';
import { Http } from '#angular/http';
//Other imports
import { HatListService } from '../service/service.component';
import Hat = App.Models.IHat;
//Component Config
#Component({
selector: 'hat-list',
templateUrl: './hat-list.component.html',
providers: [HatListService]
})
//Class
export class HatListComponent implements OnInit {
public Hats: any[];
constructor(public _hatListService: HatListService) {
}
//OnInit
ngOnInit() {
this.getAllHats();
}
//Get All
getAllHats() {
//debugger
this._hatListService.getHatList().subscribe(foundHats =>
this.Hats = foundHats
);
}
}
service.component.ts
//imports from Angular
import { Injectable, Component } from '#angular/core';
import { Http, Request, RequestMethod, Response, RequestOptions, Headers } from '#angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
//Other imports
import Hat = App.Models.IHat;
#Component({
providers: [Http]
})
//Exported class
#Injectable()
export class HatListService {
public headers: Headers;
constructor(private _http: Http) {
}
public _getUrl: string = '/api/Hats/GetHats';
//Get
getHatList(): Observable<Hat[]> {
//debugger
return this._http.get(this._getUrl).map(res => <Hat[]>res.json())
.catch(this.handleError);
}
private handleError(error: Response) {
return Observable.throw(error.json().error || 'Opps!! Server error');
}
}
hat-list.component.html:
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Count</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let hat of Hats"">
<td>{{hat.Name}}</td>
<td>{{hat.Color}}</td>
<td>{{hat.Count}}</td>
<td>
<a class="glyphicon glyphicon-remove" (click)="delete(hat)"></a>
</td>
</tr>
</tbody>
</table>
Picture of the table
The *ngFor recives the value.
I know the request to the database happens asynch and that one problem might be that the *ngfor loop fires before the data has returned and thus no information is displayed. But diffrent articles on the net say that the *ngFor loop shouldt fire unless the iterable has a value. The strange thing is that when I update the database manually thru SSMS the *ngfor recognises the added content add creates additioanl rows. What am I doing wrong.
Thanx for all the help!

Answer 1

There are wrong variable names used in the template i.e. {{hat.Name}} instead of {{hat.name}}.