Angular - 取决于变量值的条件名称

Angular - Conditional name depending on variable value

我的 Typescript 文件中有两个全局变量:

private myVar1 = 10;
private myVar2 = 150;

我有一个自定义元素,它在 html 中可以采用 [name] 属性。例如。这是我的元素上的条件名称的样子:

<custom-element [name]="myVar1 === 10 ? 'tempName' : 'someOtherTempName'"></custom-element>

在上面的例子中,名称将是 tempName,因为 myVar1 是 10。到目前为止一切顺利。

现在我的问题是:当数字(1 或 2)来自另一个变量时,我如何引用 myVar1myVar2

我尝试了以下但没有用:

<custom-element [name]="('myVar'+index) === 10 ? 'tempName' : 'someOtherTempName'"></custom-element>

简单地使用带有数组符号的函数。

getVar(index: number) {
  return this['myVar' + index];
}
<custom-element [name]="getVar(index) === 10 ? 'tempName' : 'someOtherTempName'"></custom-element>

Stackblitz

您可以通过将两个元素收集到一个数组(或字典,或任何集合)中并使用 index

检索它们来完成此操作

例如添加这本词典

let vars = {1:var1, 2:var2}

并与

一起使用
<custom-element [name]="vars[index] === 10 ? 'tempName' : 'someOtherTempName'"></custom-element>