*ngFor: last index of the loop is null

Question

This is my code in a minimal form:

<div>
    {{ 'This is all comments Array =>'}}<br> 
    {{selectedPost.comments}}
    <div *ngIf="!commentsLoading" *ngFor="#comment of selectedPost.comments">
            {{ 'This is comment Object => ' + comment }}
    </div>
</div>

The comments is an array which has 5 objects outside the *ngFor. It iterates 6 times inside the loop and the last index becomes null.

Output

Edit
Console

Does anyone know what's happening?

Do `console.debug(selectedPost.comments)` and see what is in there. — Maxim Egorushkin, Sep 26 '16 at 17:15

score 0 · Answer 1 · answered Sep 26 '16 at 17:18

0

Try adding a json pipe after your debug output to see the actual content of the array.

{{selectedPost.comments | json}}

answered Sep 26 '16 at 17:18

Alexander Ciesielski

10,506
5
45
66

Siamak Motlagh · Accepted Answer · 2017-04-01T12:34:40.310

0

I've found the problem but I don't know why such thing is happening. I moved the *ngIf="!commentsLoading" one level up like this and the problem solved.

<div *ngIf="!commentsLoading">
  {{ 'This is all comments Array =>'}}<br> 
  {{selectedPost.comments}}
  <div *ngFor="#comment of selectedPost.comments">
        {{ 'This is comment Object => ' + comment }}
  </div>
</div>

I guess it causes problem when I use *ngFor and *ngIf together in one element in order to this issue: https://github.com/angular/angular/issues/7315

edited Apr 01 '17 at 12:34

answered Sep 26 '16 at 17:22

Siamak Motlagh

5,028
7
41
65

1

Yeah, I was about to comment that you cannot have 2 asterisks in the same line, but could not find the reference. – Maxim Egorushkin Sep 26 '16 at 17:25
@MaximEgorushkin Yes there is nothing about it I guess. – Siamak Motlagh Sep 26 '16 at 17:25
@MaximEgorushkin http://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error check this out – Siamak Motlagh Sep 26 '16 at 17:32

*ngFor: last index of the loop is null

2 Answers2