*ngFor：循环的最后一个索引为空 [重复]答案

【问题标题】：*ngFor: last index of the loop is null [duplicate]*ngFor：循环的最后一个索引为空 [重复]
【发布时间】：2016-09-26 17:06:27
【问题描述】：

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

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

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

输出

编辑
控制台

有人知道发生了什么吗？

【问题讨论】：

做console.debug(selectedPost.comments) 看看里面有什么。
@MaximEgorushkin 控制台。

标签： angular iteration ngfor

【解决方案1】：

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

{{selectedPost.comments | json}}

【讨论】：

【解决方案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

【讨论】：

是的，我正要评论说您不能在同一行中有 2 个星号，但找不到参考。
@MaximEgorushkin 是的，我猜这没什么。
@MaximEgorushkin stackoverflow.com/questions/34657821/… 看看这个