Nested NgFor is not working - Angular 2

Question

I am trying to convert my AngularJS application to Angular2 application.I have a nested loop in my template. But it is not working when I use Angular2 syntax.

this is my code -

<table>
 <tr *ngFor = "let lbusQuestionAnswer of ibusQuestion.ilstQuestionAnswer">
  <table> 
   <tr *ngFor = "let lbusComment of lbusQuestionAnswer.ilstComments">
    <td>
     <div>{{lbusComment.icdoComment.idoComment.commentHtml}}</div>
    </td>
   </tr>
  </table>
 </tr>
</table>

JSON And I get below error in console log.

EXCEPTION: TypeError: Cannot read property 'ilstComments' of undefined

I know, there are a lot of similar questions like this on StackOverflow. But nothing seems to be working.

Thanks Fahad Mullaji

Your exception implies that `lbusQuestionAnswer` is `undefined` — cnorthfield, Sep 03 '16 at 19:02
I know it is undefined but why is it undefined, when it should have values — Fahad Mullaji, Sep 03 '16 at 19:08
It *should* have values. I suggest you try logging `ibusQuestion.ilstQuestionAnswer` to the console or render it in your view to check the data is indeed there as you'd expect it to be. — cnorthfield, Sep 03 '16 at 19:09
But technically if ibusQuestion.ilstQuestionAnswer does not have values then it should not even go in the nested loop. It will definitely fail. — Fahad Mullaji, Sep 03 '16 at 19:14
I think the object you should check is `ibusQuestion`. Make sure this object has an array for property `ilstQuestionAnswer` — Clint, Sep 03 '16 at 19:15
I have added my JSON response screenshot. Please check and let me know if I am missing anything!! — Fahad Mullaji, Sep 03 '16 at 19:22

score 0 · Answer 1 · answered Sep 03 '16 at 20:28

0

<div *ngIf="ibusQuestion && lbusQuestionAnswer" >
  <table>
    ...
  </table>
</div>

Valida si los elementos de la lista existen antes de mostrarlos en la vista

answered Sep 03 '16 at 20:28

Javier Jimenez

11
2

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

I found solution to this here - https://stackoverflow.com/a/34833436

When I added <div *ngIf ="ibusQuestion"> then it worked fine!!

I hope this answer helps and explains the real reason behind it

edited May 23 '17 at 12:09

Community

1
1

answered Sep 04 '16 at 17:04

Fahad Mullaji

1,332
5
15
30

Nested NgFor is not working - Angular 2

2 Answers2