Angular 2 *ngFor not displaying data - html

Question

I can't seem to get the data in this.heroes to display on the list. I put an alert(this.heroes[0].name); and it did display the data so this._service.getHeroes(); is returning the data
app.html
<div style="width:1000px;margin:auto">
<ul>
<li *ngFor="#hero of heroes">
<span>{{hero.name}}</span>
</li>
</ul>
</div>
app.component.ts
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();
}
}

Answer 1

Try this first and see if it works:
<li ng-repeat="hero in heroes">
{{hero.name}}
</li>
If this works you might have an older angular version that does not support the *ngFor syntax yet (I think this is supported in the new version angular 2).

Answer 2

I've done a little more research and no data is displaying. For example:
<h2>My favorite hero is {{ myHero }}</h2>
gets a blank line (where myHero is a populated string) whereas
<h2>My favorite hero is </h2>
displays
My favourite hero is
I'm going to change the Beta version of Angular 2 to see if it helps