角2/ASP.NETコア* ngForループの問題

Question

データベースから角2 * ngForループへの情報を表示する際に問題が発生しています。これは、これまでの私のコードです：

ネットコアコントローラ：

 // 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：テーブル

* ngForの

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

ピクチャー値をrecives。

私は、データベースへの要求は非同期に発生し、一つの問題は、*ループ火災ngforデータが戻ってきたので、何も情報が表示されない前にいることであるかもしれないことを知っています。しかし、ネット上の記事では、繰り返し可能な値がない限り、* ngForループは起動しなくてはならないと言われています。奇妙なことは、SSMSを使用してデータベースを手動で更新すると、* ngforが追加された内容を認識し、additioanl行が作成されるということです。私は間違って何をしています。

すべてのヘルプのためのThanx！

Answer 1

テンプレートで使用されている変数名が、{{hat.name}}ではなく{{hat.Name}}です。