angular - ng6 : Dynamically form Variable names in html

Question

组件

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

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

html

这将显示组件中的 var i18

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

这将显示组件中的 var i18

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

这会解析为“i18”而不是“服务器”

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

问题

在最后一个片段中，我尝试使用 'i'+category.id 从组件获取 i18 的值，其中 category.id 是“18”，它会打印“i18”模板。如何编写 HTML，使 'i'+category.id 的值为“server”

Answer 1

您无法在模板中动态创建变量名称。您可以将值存储在 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进行演示。