如何动态更新CSS ID值并添加active类？Angular循环动态生成ID

这就帮你搞定这两个需求，分步骤来：

1. 动态生成Section ID #

你当前代码里的ID是固定的Section1，要在循环里生成Section1到Section10，直接利用*ngFor里的index变量就行（注意索引从0开始，所以要加1）。修改模板里的ID绑定：

<div *ngFor="let plan of allPlans; let i=index" 
     class="tab-pane fade" 
     [id]="'Section' + (i + 1)"
     [class.active]="i === currentActiveIndex"
     [class.in]="i === currentActiveIndex"
     (click)="setActive(i)">
  <div class="pricing-bg pricing-img2">
    <h4>Total cost</h4>
    <figure><span>$</span><b>{{ plan.totalCost }}</b></figure> <!-- 建议把硬编码的4换成计划数据里的字段，更贴合循环逻辑 -->
    <h3>per mail cost {{ plan.perMailCost }} ¢</h3> <!-- 同理，0.5也换成动态数据 -->
    <button [routerLink]="userLoggedIn ? '/dashboard' : null" 
            [attr.data-target]="modalId" 
            data-toggle="modal" 
            class="button button1 pricing-pad">GET STARTED</button>
  </div>
</div>

2. 点击元素添加Active类 #

要实现点击哪个元素就给它加active类，需要在组件里维护一个变量跟踪当前激活的索引，再绑定到模板的类上：

在组件的TypeScript文件里添加以下代码：

import { Component } from '@angular/core';

@Component({
  // 这里保留你原本的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  allPlans = []; // 你的10条计划数据，记得替换成实际数据
  userLoggedIn = false; // 根据你的登录逻辑设置这个值
  modalId = '#your-modal-id'; // 替换成你的模态框实际ID
  currentActiveIndex = 0; // 默认激活第一个元素

  setActive(index: number): void {
    this.currentActiveIndex = index;
  }
}

关键细节说明 #

• 动态ID生成：用[id]="'Section' + (i + 1)"这种属性绑定方式，循环时会自动把索引+1拼接到Section后面，生成你需要的Section1到Section10。
• Active类切换：通过[class.active]和[class.in]（这两个是bootstrap tab-pane样式需要的类）绑定到currentActiveIndex，点击元素时调用setActive方法更新索引，就能实现点击哪个哪个激活的效果。
• 另外，你模板里原本所有元素都加了active和in类，这会导致所有内容都显示激活状态，现在改成动态绑定后就只有当前激活的元素会有这两个类啦。

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