嵌套的 NgFor 不起作用 - Angular 2 [重复]答案

【问题标题】：Nested NgFor is not working - Angular 2 [duplicate]嵌套的 NgFor 不起作用 - Angular 2 [重复]
【发布时间】：2017-01-11 15:09:36
【问题描述】：

我正在尝试将我的 AngularJS 应用程序转换为 Angular2 应用程序。我的模板中有一个嵌套循环。但是当我使用 Angular2 语法时它不起作用。

这是我的代码 -

<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 我在控制台日志中得到以下错误。

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

我知道，在 StackOverflow 上有很多类似的问题。但似乎没有任何效果。

谢谢法赫德·穆拉吉

【问题讨论】：

您的异常意味着lbusQuestionAnswer 是undefined
但事实并非如此。让我在问题中添加可能的 JSON
我知道它是未定义的，但为什么它是未定义的，什么时候应该有值
它应该有值。我建议您尝试将ibusQuestion.ilstQuestionAnswer 记录到控制台或将其呈现在您的视图中以检查数据是否确实如您所愿。
但从技术上讲，如果 ibusQuestion.ilstQuestionAnswer 没有值，那么它甚至不应该进入嵌套循环。它肯定会失败。

标签： javascript angular angular2-template

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我在这里找到了解决方案 - https://stackoverflow.com/a/34833436

当我添加 <div *ngIf ="ibusQuestion"> 时，它工作正常！！

我希望这个答案有所帮助并解释其背后的真正原因

【讨论】：