Angular 2 / ASP.NET 核心 *ngFor 循环问题

Question

我在将信息从数据库显示到 angular 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:

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

图片table

*ngFor 返回值。

我知道对数据库的请求是异步发生的，一个问题可能是 *ngfor 循环在数据返回之前触发，因此没有显示任何信息。但是网上的不同文章说 *ngFor 循环不应该触发，除非 iterable 有一个值。奇怪的是，当我通过 SSMS 手动更新数据库时，*ngfor 识别添加的内容添加创建 additioanl 行。我做错了什么。

感谢大家的帮助！

Answer 1

模板中使用了错误的变量名称，即 {{hat.Name}} 而不是 {{hat.name}}。

Angular 2 / ASP.NET 核心 *ngFor 循环问题

Angular 2 / ASP.NET Core *ngFor loop issue

asp.net-core

angular2-ngfor