* 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次，最后一个索引变为空。

输出

修改
控制台

有谁知道发生了什么事？

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