如何打印ng-template的索引？Angular模板索引显示问题求助

我来帮你搞定这个问题！你遇到的核心问题是：ng-template本身不会自动提供index变量，必须在创建嵌入式视图时手动把上下文数据传递进去，模板才能访问到这些变量。下面是具体的解决步骤：

1. 传递上下文数据到嵌入式视图 #

在你的cloneStep方法里，调用createEmbeddedView时，第二个参数可以传入一个上下文对象，把index变量传递给模板。我们可以用容器当前的视图数量作为新步骤的索引（因为创建前的长度就是新视图的索引）：

cloneStep() {
  // 获取当前容器的视图数量，作为新步骤的索引
  const stepIndex = this.container.length;
  // 传入上下文，让模板能访问到index变量
  this.container.createEmbeddedView(this.template, { index: stepIndex });
}

2. 处理删除后的索引同步问题 #

如果直接按索引删除视图，删除中间步骤后，剩下的视图索引会和实际位置不匹配（比如删除索引1的步骤后，原来的索引2变成了1，但模板里的index还是2）。所以建议维护一个步骤数组来管理，删除后重新渲染所有步骤：

组件代码改进： #

import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

export class AddInterviewComponent {
  @ViewChild('stepsClone') template!: TemplateRef<any>;
  @ViewChild('stepsContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  
  // 用数组跟踪所有步骤，方便删除后重新渲染
  private steps: number[] = [];

  cloneStep() {
    this.steps.push(this.steps.length);
    this.renderSteps();
  }

  removeStep(index: number) {
    // 删除对应步骤
    this.steps.splice(index, 1);
    // 重新渲染所有步骤，确保索引正确
    this.renderSteps();
  }

  private renderSteps() {
    // 先清空容器
    this.container.clear();
    // 重新创建每个步骤的视图，传入正确的索引
    this.steps.forEach((_, idx) => {
      this.container.createEmbeddedView(this.template, { index: idx });
    });
  }
}

模板代码保持不变： #

<ng-template #stepsClone > 
  <p>Paragraph {{index}} </p> 
  <input type="button" (click)="removeStep(index)" value="X" > 
</ng-template>

<!-- 假设你的容器是这样的 -->
<div #stepsContainer></div>

原理说明 #

Angular的createEmbeddedView方法的第二个参数是上下文对象，模板里的变量会从这个对象中取值。默认情况下上下文是空的，所以你之前直接用{{index}}会找不到变量。通过手动传入包含index的对象，模板就能正确访问到这个值了。

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