如何在Angular中动态切换绑定变量并显示其实际值？

我懂你的需求啦——现在单选按钮切换后只会显示变量名，但你想要的是对应变量的实际值对吧？其实有两种简单直接的实现方式：

方法一：用对象存储变量，通过键名动态访问 #

把你的两个属性整合到一个对象里，这样就能用activeVariableName这个字符串键来获取对应的值：

组件类代码修改： #

export class YourComponent {
  // 将变量统一放到对象中管理
  public variableMap = {
    first: '"first" variable activated',
    second: '"second" variable activated'
  };
  public activeVariableName: string = 'first'; // 默认选中第一个选项
}

模板代码修改： #

<input type="radio" value="first" [(ngModel)]="activeVariableName"> First
<input type="radio" value="second" [(ngModel)]="activeVariableName"> Second

<!-- 通过对象的动态键名获取对应值 -->
<h1>{{ variableMap[activeVariableName] }}</h1>

方法二：用组件getter方法动态返回值 #

如果不想调整现有变量的结构，可以在组件里写一个getter，通过字符串属性名来访问实例上的对应值：

组件类代码修改： #

export class YourComponent {
  public first: string = '"first" variable activated';
  public second: string = '"second" variable activated';
  public activeVariableName: string = 'first';

  // 用getter动态获取对应属性的值
  get activeValue(): string {
    // 加keyof this类型断言，避免TypeScript类型报错
    return this[this.activeVariableName as keyof this];
  }
}

模板代码修改： #

<input type="radio" value="first" [(ngModel)]="activeVariableName"> First
<input type="radio" value="second" [(ngModel)]="activeVariableName"> Second

<!-- 直接调用getter获取值 -->
<h1>{{ activeValue }}</h1>

为什么原来的方式不行？ #

你之前写的{{activeVariableName}}只是把activeVariableName存储的字符串（"first"或"second"）直接输出了，并没有去访问组件实例上名为first或second的属性。而上面两种方式都是通过动态属性访问的逻辑，把字符串转换成了对对应属性的引用，这样就能拿到你想要的实际值啦～

内容的提问来源于stack exchange，提问作者P.S.