AngularJS中的嵌套循环：为什么不同的语法？

Question

我有一个看起来像这样的表：

产生它的角度代码如下所示：

<table id="bt-consequence-table" class="table table-hover table-striped table-condensed">
                  <thead><tr><th>Category</th><th>Description</th></tr>
</thead>
                  <ng-template ngFor let-consequenceGroup [ngForOf]="bowtieDiagram.ConsequenceContainer.BowtieLeafs" let-i="index">
                      <tr [ngClass]="{'selected': selectedConsequence == i, 'bt-table-row': true}"
                          *ngFor="let consequence of consequenceGroup.BowtieLeafObjects; let j = index"
                          [attr.data-index]="i"

(click)="bowtieDiagram.ConsequenceContainer.selectLeafByIndex(i); selectedConsequence = i;">
                          <td>{{consequenceGroup.GroupName}}</td>
                          <td>{{consequence.Description}}</td>
                      </tr>
                  </ng-template>
              </table>

请注意，上面的代码中有两个循环。外部循环用这一行实现：

<ng-template ngFor let-consequenceGroup [ngForOf]="bowtieDiagram.ConsequenceContainer.BowtieLeafs" let-i="index">

内部循环用这一行实现：

<tr [ngClass]="{'selected': selectedConsequence == i, 'bt-table-row': true}"
                          *ngFor="let consequence of consequenceGroup.BowtieLeafObjects; let j = index"
                          [attr.data-index]="i"

(click)="bowtieDiagram.ConsequenceContainer.selectLeafByIndex(i); selectedConsequence = i;">

我想知道的是，为什么两个循环的语法必须如此不同？

我尝试使用与内部for循环相同的语法编写外部for循环，如下所示：

<ng-template *ngFor="let consequenceGroup of bowtieDiagram.ConsequenceContainer.BowtieLeafs; let i = index">

但是当我这样做时，我得到一张空桌子：

有人可以告诉我为什么我必须使用不正确的语法才能使外循环工作？