*ngFor：循环的最后一个索引为空

Question

这是我的最小形式的代码：

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

评论是一个数组，在 *ngFor 之外有 5 个对象。它在循环内迭代 6 次，最后一个索引变为 null。

输出

编辑
控制台

有谁知道发生了什么事吗？

Answer 1

尝试在调试输出后添加一个 json 管道以查看数组的实际内容。

{{selectedPost.comments | json}}

Answer 2

我找到了问题，但我不知道为什么会这样。我像这样将 *ngIf="!commentsLoading" 向上移动了一层，问题就解决了。

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

我想当我在一个元素中同时使用 *ngFor 和 *ngIf 时会导致问题：https://github.com/angular/angular/issues/7315

*ngFor：循环的最后一个索引为空

*ngFor: last index of the loop is null

iteration

ngfor

angular