CODEWITHSUNDEEP
angularangular2-template
Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

Angular 2 ngFor gets undefined when accessing a property

I am follwing angular2 tutorials and tries to iterate over Array:

<table class = "table table-hover">
    <thead>
        <th>ID</th>
        <th>Title</th>
        <th>Descreption</th>
    </thead>
    <tbody>
        <tr *ngFor = "#v of videos"></tr>
        <td>{{v.id}}</td>
        <td>{{v.title}}</td>
        <td>{{v.desc}}</td>
    </tbody>

</table>

The error I get is Cannot read property 'id' of undefined, but when I print the object in the same html :

<!--printing the same object -->
{{videos[0] | json}}

It shows the object as expected, for example:

{ "id": 1, "title": "title..", "videoCode": "afe6JW2oTZc", "desc": "My Videos" }

I have tried json pipe - {{v.id | json}}, and still it does not work,

Thanks for any help.

Upvotes: 2

Views: 2076

Answers (2)

micronyks
micronyks

Reputation: 55443

# has been replaced by let keyworkd. If you are dealing with async call then you need to use ?. operator for lazy binding of properties as shown below,

<tbody>                        
        <tr *ngFor = "let v of videos">
         <td>{{v?.id}}</td>
         <td>{{v?.title}}</td>
         <td>{{v?.desc}}</td>
        </tr>
</tbody>

OR

you can use *ngIf until data gets loaded to object as shown below,

 <table class = "table table-hover" *ngIf="videos">   //<<<===here
    <thead>
        <th>ID</th>
        <th>Title</th>
        <th>Descreption</th>
    </thead>
    <tbody>
        <tr *ngFor = "let v of videos">
         <td>{{v.id}}</td>
         <td>{{v.title}}</td>
         <td>{{v.desc}}</td>
        </tr>
    </tbody>

</table>

Upvotes: 3

Poul Kruijt
Poul Kruijt

Reputation: 71911

You've been following the wrong tutorials. The usage of #v is a very old syntax, and hasn't been used since it went to beta. The new syntax uses the let keyword:

On the other hand, you should place your td inside the tr loop, and not outside of it:

<table class="table table-hover">
    <thead>
        <th>ID</th>
        <th>Title</th>
        <th>Descreption</th>
    </thead>
    <tbody>
        <tr *ngFor="let v of videos">
           <td>{{v.id}}</td>
           <td>{{v.title}}</td>
           <td>{{v.desc}}</td>
        </tr>
    </tbody>
</table>

Probably the second thing I said is your issue here, but I believe the bigger issue is you using an old version of angular. Just head over to angular.io and take the tutorials there

Upvotes: 4

Related Questions