angular - ng6:以html形式动态形成变量名称

组成部分
在我的组件中有这样的变量。

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

HTML格式
这将显示组件的vari18。

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

这将显示组件的vari18。

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

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

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

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

最佳答案

不能在模板中动态创建变量名。您可以将值存储在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>

参见演示文稿AA>。

关于angular - ng6:以html形式动态形成变量名称，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51249884/