json 在 Angular 2 中从 Web API 获取数据

Getting data from Web API in Angular 2

提问by SteppingRazor

Thanks to tutorial on Angular 2 page called "Tour of Heroes", I managed to create a simple Angular 2 application. Then using Enitity Framework I decided to create a database. And fill the list of heroes from it (not from the file). I created Web Api Controller and added simple get method. Then in hero.service.tsI call this method in order to get list of heroes. When I lunch my app it shows the list of heroes but without any values (name and id are blank). When I debug my application in the browser I can see this.heroesobject in heroes.component.tscontains right data. So what is going on? Why aren't nameand idshowing?

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

hero.service.ts:

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:

hero.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:

英雄.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:

英雄.ts：

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

Web API Controller:

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

Hero Entity:

英雄实体：

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

JSON retrieved from WEB API Controller:

从 WEB API 控制器检索的 JSON：

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

采纳答案by SteppingRazor

In my case the issue was related to the visual studio 2015 bug. There was nothing wrong with the code itself. Sometimes changes made in vs were not refreshed in the browser. Updating vs to the latest version helped.

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

回答by micronyks

getHeroes() {
        this._heroservice.getHeroes()
           .subscribe(res=>{
            this.heroes=res;
            console.log(this.heroes); // make sure you get data here.
         },
         (err)=>console.log(err),
         ()=>console.log("Done")
         );
 }

回答by adem caglin

Try this :public heroes: Hero[] = [];

尝试这个 ：public heroes: Hero[] = [];