Angular 2嵌套*ngFor传递索引问题：参数ii返回undefined

你遇到的问题根源是*把Angular ngFor的索引变量赋值写反了，Angular的语法规则是let 自定义变量名 = index——其中index是Angular内置的导出变量，用来表示当前循环的索引，而你搞反了左右两边的变量关系。

错误代码的核心问题 #

看你的嵌套循环代码片段：

<div *ngFor="let tab of screen.data.tabs; let index = i;"> 
  <div *ngIf="tab.active"> 
    <div *ngIf="tab.questions"> 
      <div *ngFor="let question of tab.questions; let index = ii;"> 
        <!-- 后续内容 -->
      </div>
    </div>
  </div>
</div>

这里有两处关键错误：

1. 外层循环：你写了let index = i;，但正确写法应该是let i = index;——index是Angular提供的内置索引变量，你需要把它赋值给自定义的变量i，而不是反过来。
2. 内层循环：你写了let index = ii;，同样搞反了赋值逻辑，应该是let ii = index;。只有这样，Angular才会把当前循环的索引值赋值给你自定义的ii变量，否则ii根本没被正确初始化，自然会返回undefined。

修正后的完整代码示例 #

<div *ngFor="let tab of screen.data.tabs; let i = index;"> 
  <div *ngIf="tab.active"> 
    <div *ngIf="tab.questions"> 
      <div *ngFor="let question of tab.questions; let ii = index;"> 
        <div class="scenarioContainerQUESTION"> 
          <p [innerHtml]="question.text"></p> 
          <div *ngFor="let option of question.options; let iii = index;" class="option" [ngClass]="{'optionSelected': ...}">
            <!-- 你的选项内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

补充说明 #

每个*ngFor循环的index是独立作用域的，所以你可以用i、ii、iii这类不同的自定义变量名区分层级索引，避免变量冲突。之后如果需要把这些索引传递给函数（比如(click)="handleOptionSelect(i, ii, iii)"），这些变量就会正确携带对应层级的循环索引值，不会再出现undefined的情况。

内容的提问来源于stack exchange，提问作者Dylan Anlezark