ng6：以html形式动态形成变量名称

Question

组件

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

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

html

这将显示组件中的变量i18

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

这将显示组件中的变量i18

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

此解析为“ i18”，而不是“服务器”

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

问题

在最后一个代码段中，我尝试从具有i18的组件中获取'i'+category.id的值，其中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。