각도 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 루프 화재 전에 한 가지 문제가있을 것이라는 정보가 표시되지 않도록. 그러나 그물에있는 다른 기사들은 iterable이 값을 가지지 않는다면 * ngFor 루프가 시작되어야한다고 말합니다. 이상한 점은 SSMS를 통해 수동으로 데이터베이스를 업데이트하면 * ngfor가 추가 된 내용을 인식하여 additioanl 행을 추가한다는 것입니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까.

고맙습니다.

Answer 1

{{hat.name}} 대신에 {{hat.Name}}과 같은 틀린 변수 이름이 템플릿에 사용되었습니다.