Angular 2 *ngFor not displaying data
<p>I can't seem to get the data in <strong>this.heroes</strong> to display on the list. I put an <strong>alert(this.heroes[0].name);</strong> and it did display the data so <strong>this._service.getHeroes();</strong> is returning the data</p>

<p><strong>app.html</strong></p>

<pre><code>&lt;div style="width:1000px;margin:auto"&gt;
    &lt;ul&gt;
        &lt;li *ngFor="#hero of heroes"&gt;
            &lt;span&gt;{{hero.name}}&lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><strong>app.component.ts</strong></p>

<pre><code>import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroService} from './heroes/hero.service';
import {Hero} from './heroes/hero';

@Component({
    selector: 'my-app',
    templateUrl: 'templates/app.html',
    providers: [HeroService],
    directives: [ROUTER_DIRECTIVES]
})

export class AppComponent {
    heroes: Hero[];

    constructor(private _service: HeroService) { }

    ngOnInit() {
        this.heroes = this._service.getHeroes();
    }
}
</code></pre>