代码之家 › 专栏 › 技术社区 › Omar

ng6:动态地以HTML格式设置变量名

typescript angular

2

Omar · 技术社区 · 7 年前

组件

在我的组件中,我有这样的变量。

i18 = 'server';
i19 = 'database';
i21 = 'share-alt';
i20 = 'battery-full';
i22 = 'soundcloud';

这将显示var i18 从组件

<fa [name]="[i18]"></fa>

这将显示var 18岁 从组件

<fa [name]="i18"></fa>

这将解析为“i18”而不是“server”

<fa [name]="'i'+category.id"></fa>

在最后一段代码中,我试图获取 18岁 从组件 'i'+category.id 哪里 category.id 而是“18”,它打印模板“i18”。如何编写HTML,以便 'i'+类别.id 是“服务器”

1 回复 | 直到 7 年前

1

2

ConnorsFan 7 年前

不能在模板中动态创建变量名。您可以将值存储在 Map 结构:

public names = new Map<number,string>([
  [18, "server"],
  [19, "database"],
  [20, "battery-full"],
  [21, "share-alt"],
  [22, "soundcloud"],
]);

然后用 get 模板中的方法:

<fa [name]="names.get(category.id)"></fa>

参见 this stackblitz 用于演示。