Angular 2 *ngFor not displaying data

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

Where did you put the alert()? Can you make a plnkr or jsfiddle? — martin
– martin, Commented Mar 3, 2016 at 10:27
Did this work with the old ng-repeat="hero in heroes". Read this for reference: coryrylan.com/blog/angular-2-ng-for-syntax — lisa p.
– lisa p., Commented Mar 3, 2016 at 11:05

lisa p. · Accepted Answer · 2016-03-03 11:14:00Z

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).

answered Mar 3, 2016 at 11:14

lisa p.

2,15621 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Over a year ago

Thanks Lisa I'll try it. Its also occurred to me that I might need a number property for *ngFor to work. My Heores class only has a string property for name.

Mark Over a year ago

My package.json and index.html weren't properly configured for Angular 2 and dependencies. It works fine now. Thanks Lisa

lisa p. Over a year ago

Ah! I see. I'll keep this in mind when I switch to angular 2.

Mark · Accepted Answer · 2016-03-05 17:49:10Z

0

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

edited Mar 5, 2016 at 17:49

answered Mar 4, 2016 at 17:18

Mark

3575 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular 2 *ngFor not displaying data

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related