Getting data from Web API in Angular 2

angular entity-framework json


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.ts I 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.heroes object in heroes.component.ts contains right data. So what is going on? Why aren't name and id showing?


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

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())
    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');


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

    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() {

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

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

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


<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}}
<div *ngIf="selectedHero">
        {{selectedHero.Name | uppercase}} is my hero
    <button (click)="gotoDetail()">View Details</button>


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

Web API Controller:

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

namespace WebApplication2.Controllers
    public class ValuesController : Controller
        private readonly TestAppDbContext _dbContext;

        public ValuesController(TestAppDbContext dbContext)
            _dbContext = dbContext;

        // GET: api/values
        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:

4/5/2016 12:56:17 PM

Accepted Answer

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.

10/12/2016 3:28:54 PM

Popular Answer

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

Related Questions


Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow