Angular2 *ngFor: “Cannot read property '0' of undefined”

Question

I trying to get data from a JSON file to build a form.

Here is a portion of my template:

  

    

        
                      

              相关标签:
       
      

Answer 1

Alternative to @Gunter Zochbauer's solution, you can declare heroesas Array property of suitable type. If you have any class with all attributes of heroes you declare heroes property as:

heroes:Array<Heroes> //Assuming class name is Heroes

And initialize it in constructor as follows:

constructor(){
...    
this.heroes=new Array<Heroes>();
}

And in your ngFor loop simply access class attributes as follows:

<option *ngFor="let p of heroes" [value]="p.place">{{p.place}}</option>

Hope it helps.

Answer 2

I figured out the problem. I got this error because I'm fetching data asynchronously and when Angular tries to resolve bindings the first time data is still null therefore heroes[0] fails.

So I solved the problem initializing heroes array and using the "Elvis operator":

heroes: Hero[]; instead of heroes: Hero[] = []; in the component.

heroes[0]?.places instead of heroes[0].places in the html template.

Answer 3

I guess what you want is

*ngFor="let p of heroes?.data"

because heroes seems to be an object, and ngFor can only iterate array. The level property also is in an array item.