如何修改Angular中ngFor循环内当前选中按钮的文本？

你的问题出在全局共享的buttonValue变量上——所有循环出来的按钮都绑定了同一个buttonValue，所以只要修改它，所有按钮的文本都会同步变化。

修复方案（单选场景） #

不需要单独维护按钮文本变量，直接通过selectedPlan和当前循环的plan对比，动态生成按钮文本：

修改后的TypeScript代码 #

export class SelectPlanComponent implements OnInit {

  plans: any;
  selectedPlan?: Plan;

  constructor(private service: PlansService) { }

  ngOnInit(): void {
    this.service.getPlans()
      .subscribe((response) => {
        this.plans = response;
        console.log(response);
      });
  }

  onSelect(plan: Plan): void {
    this.selectedPlan = plan;
    // 移除修改buttonValue的代码
  }
}

修改后的HTML代码 #

重点修改按钮的文本渲染部分：

<div class="card" *ngFor="let plan of plans">
    <h2>{{plan.title}}</h2>
    <p >£{{plan.amount}}</p>
    <p>{{plan.duration}}</p>
    <div class="benefits-container">
        <div class="benefits" *ngFor="let item of plan.description.items">
            <div class="icon-container">
                <mat-icon>check</mat-icon>
            </div>
            <p>{{item}}</p>
        </div>
    </div>
    <!-- 用条件表达式动态切换按钮文本 -->
    <a class="inverted-button" [class.selected]="plan === selectedPlan" (click)="onSelect(plan)">
        {{plan === selectedPlan ? 'Selected' : 'Select'}}
    </a>
</div>

原理说明 #

通过plan === selectedPlan这个条件判断，只有被选中的那个plan对应的按钮会显示Selected，其他按钮保持Select，彻底解决全局变量导致的同步变更问题。

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