如何让Angular中ngFor的index变量在模板其余部分可用？

你遇到的核心问题是Angular的*ngFor作用域限制：每个循环生成的变量（比如indx）仅在当前循环的DOM范围内有效，无法直接在其他*ngFor块中访问。以下是几种实用的解决方法：

方法1：将索引存储到组件类属性（最常用） #

把需要共享的索引值绑定到组件类的属性中，让整个模板都能访问：

1. 在组件的.ts文件中定义属性：

// 组件类代码
activeTabIndex = 0; // 初始化默认值，可根据业务需求调整

2. 修改第一个*ngFor模板，将索引赋值给这个属性（如果需要响应点击切换激活状态，可绑定点击事件）：

<li *ngFor="let navItem of ingredients.navItems; index as indx"
    class="nav-item"
    role="presentation"
>
  <a
    class="nav-link ingredients"
    [ngClass]="{ active: indx === activeTabIndex }"
    role="tab"
    data-bs-toggle="tab"
    [href]="navItem.href"
    (click)="activeTabIndex = indx" <!-- 点击时更新激活索引 -->
  >
    <strong>{{ navItem.title }}</strong>
  </a>
</li>

3. 在第二个*ngFor中直接使用这个组件属性：

<li *ngFor="let navItem of tabcontent.navItems"
    class="nav-item"
    role="presentation"
>
  <a
    class="nav-link ingredients"
    [ngClass]="{ active: activeTabIndex === 0 }" <!-- 根据需求判断，比如和第一个循环激活状态同步 -->
    role="tab"
    data-bs-toggle="tab"
    [href]="navItem.href"
  >
    <strong>{{ navItem.name }}</strong>
  </a>
</li>

方法2：使用模板引用变量存储索引（适用于静态单一值场景） #

如果只需要固定存储第一个*ngFor中某一个索引值（比如第一个项的0），可以用模板引用变量结合属性绑定实现：

<!-- 第一个ngFor中，给目标元素添加模板引用和索引属性 -->
<li #targetNavItem *ngFor="let navItem of ingredients.navItems; index as indx"
    class="nav-item"
    role="presentation"
    [attr.data-index]="indx"
>
  <!-- 原有内容 -->
</li>

<!-- 第二个ngFor中，通过模板引用获取存储的索引 -->
<li *ngFor="let navItem of tabcontent.navItems"
    class="nav-item"
    role="presentation"
>
  <a
    class="nav-link ingredients"
    [ngClass]="{ active: targetNavItem.getAttribute('data-index') === '0' }"
    role="tab"
    data-bs-toggle="tab"
    [href]="navItem.href"
  >
    <strong>{{ navItem.name }}</strong>
  </a>
</li>

注意：如果第一个*ngFor有多个项，targetNavItem会指向最后一个渲染的<li>，因此仅适合固定索引值的场景。

方法3：自定义ngVar指令（灵活共享任意变量） #

如果需要频繁在模板中共享变量，可以自定义一个简单的ngVar指令实现全局模板变量存储：

1. 创建指令文件ng-var.directive.ts：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ngVar]'
})
export class NgVarDirective {
  @Input() set ngVar(context: any) {
    this.vcRef.clear();
    this.vcRef.createEmbeddedView(this.templateRef, { $implicit: context });
  }

  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {}
}

2. 在模块中声明该指令后，在模板中使用：

<!-- 在模板合适位置存储共享变量 -->
<ng-container *ngVar="0 as globalIndx"></ng-container>

<!-- 第一个ngFor中使用全局变量 -->
<li *ngFor="let navItem of ingredients.navItems; index as indx"
    class="nav-item"
    role="presentation"
>
  <a
    class="nav-link ingredients"
    [ngClass]="{ active: indx === globalIndx }"
    role="tab"
    data-bs-toggle="tab"
    [href]="navItem.href"
  >
    <strong>{{ navItem.title }}</strong>
  </a>
</li>

<!-- 第二个ngFor中直接使用globalIndx -->
<li *ngFor="let navItem of tabcontent.navItems"
    class="nav-item"
    role="presentation"
>
  <a
    class="nav-link ingredients"
    [ngClass]="{ active: globalIndx === 0 }"
    role="tab"
    data-bs-toggle="tab"
    [href]="navItem.href"
  >
    <strong>{{ navItem.name }}</strong>
  </a>
</li>

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