从Angular 2中的Web API获取数据

Question

感谢Angular 2页面上的"英雄之旅"教程,我设法创建了一个简单的Angular 2应用程序.然后使用Enitity Framework我决定创建一个数据库.并从中填充英雄列表(不是从文件中).我创建了Web Api Controller并添加了简单的get方法.然后在hero.service.ts我调用此方法以获取英雄列表.当我在我的应用程序午餐时,它会显示英雄列表,但没有任何值(名称和ID为空白).当我在浏览器中调试我的应用程序时,我可以看到this.heroes对象heroes.component.ts包含正确的数据.那么发生了什么？为什么不name和id展示？

hero.service.ts:

import {Injectable} from 'angular2/core';
import {HEROES} from './mock-heroes';
import {Hero} from './hero';
import {Http, Response} from 'angular2/http';
import 'rxjs/Rx';
import {Observable}     from 'rxjs/Observable';

@Injectable()
export class HeroService {

    public values: any;

    constructor(public _http: Http) { }

    private _heroesUrl = 'http://localhost:61553/api/values'; // URL to web api

    getHeroes() {
        return this._http.get(this._heroesUrl)
            .map(res => <Hero[]>res.json())
            .catch(this.handleError);
    }
    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

heroes.component.ts:

import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';

import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';

@Component({
    selector: 'my-heroes',
    templateUrl: 'templates/heroes.component.html',
    styleUrls: ['styles/heroes-component.css'],
    directives: [HeroDetailComponent]
})

export class HeroesComponent implements OnInit {

    constructor(private _heroservice: HeroService, private _router: Router) { }

    errorMessage: string;
    public heroes: Hero[];

    selectedHero: Hero;

    ngOnInit() {
        this.getHeroes();
    }

    onSelect(hero: Hero)
    {
        this.selectedHero = hero;
    }

    getHeroes() {
        this._heroservice.getHeroes()
            .subscribe(
            value => this.heroes = value,
            error => this.errorMessage = <any>error);
    }

    gotoDetail() {
        this._router.navigate(['HeroDetail', { id: this.selectedHero.Id }]);
    }
}

heroes.component.html:

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="#hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
        <span class="badge">{{hero.Id}}</span> {{hero.Name}}
    </li>
</ul>
<div *ngIf="selectedHero">
    <h2>
        {{selectedHero.Name | uppercase}} is my hero
    </h2>
    <button (click)="gotoDetail()">View Details</button>
</div>

hero.ts:

export class Hero {
    Id: number;
    Name: string;
}

Web API控制器:

using Microsoft.AspNet.Mvc;
using System.Collections.Generic;
using TestApplicationDataAccess;
using TestApplicationDataAccess.Entities;

namespace WebApplication2.Controllers
{
    [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        private readonly TestAppDbContext _dbContext;

        public ValuesController(TestAppDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        // GET: api/values
        [HttpGet]
        public IEnumerable<Hero> Get()
        {
            return _dbContext.Heroes;
        }
    }
}

英雄实体:

namespace TestApplicationDataAccess.Entities
{
    public class Hero
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

从WEB API Controller检索的JSON:

[{"Id":1,"Name":"Superman"}]

Answer 1

就我而言，该问题与 Visual Studio 2015 错误有关。代码本身没有任何问题。有时在 vs 中所做的更改不会在浏览器中刷新。更新到最新版本有帮助。