动态调用变量答案

【问题标题】：Dynamically calling variable动态调用变量
【发布时间】：2021-06-12 12:07:38
【问题描述】：

在 Angular 组件中，我想使用不同的变量。例如：

export class AppComponent{
 value1;
 value2;
 value3;
 value4;
  
 print(position)
 {
   console.log(this.('value'+position));  
 //position will have values like 1,2,3,4 and I want to access value1, value2,value3,value4 
 //variables accordingly.
 }
  
}

如何执行？

【问题讨论】：

this['value'+position]

标签： javascript angular typescript loops variables

【解决方案1】：

class AppComponent {
    constructor() {
        this.value1 = "val1";
        this.value2 = "val2";
        this.value3 = "val3";
        this.value4 = "val4";
    }

    print(position) {
        console.log(this['value' + position]);
    }
}

appComponent = new AppComponent();

appComponent.print(4);

class AppComponent {
    constructor() {
        this.value1 = "val1";
        this.value2 = "val2";
        this.value3 = "val3";
        this.value4 = "val4";
    }

    print(position) {
        console.log(this['value' + position]);
    }
}

appComponent = new AppComponent();

appComponent.print(4);

【讨论】：

【解决方案2】：

这是通过computed property names实现的：

export class AppComponent{
   value1;
   value2;
   value3;
   value4;
  
   print(position)
   {
       console.log(this['value' + position]);
       // or with template literals
       // console.log(this[`value${position}`]); 
   }
}

Template literals documentation

【讨论】：

非常感谢，它为我节省了很多时间。我搜索了一个多小时，但找不到解决方案。

【解决方案3】：

将引用从点表示法更改为方括号表示法，您将实现您想要的。

export class AppComponent {
  value1 = 1;
  value2 = 2;
  value3 = 3;
  value4 = 4;

  constructor() {
    this.print(3); // will print 3
  }
  
  print(position: number): void {
    console.log(this[`value${position}`]);  
  }
}

【讨论】：