Angular 2/ASP.NET Core * ngFor循環問題

我在將數據庫中的信息顯示到角2 * ngFor循環時出現問題。這是到目前爲止我的代碼：Angular 2/ASP.NET Core * ngFor循環問題

對.NET核心控制器：

 // GET: api/Hats 
    [HttpGet("GetHats")] 
    public IEnumerable<Hat> GetHats() 
    { 
     return _context.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'); 
    } 
}

帽子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>

圖片表