时间戳

首页 > 解决方案 > ng6：在 html 中动态形成变量名

angular - ng6：在 html 中动态形成变量名

问题描述

零件

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

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

html

i18这将显示组件中的var

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

i18这将显示组件中的var

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

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

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

问题

在最后一个片段中，我试图从where为“18”i18的组件中获取值，而不是打印“i18”模板。我怎样才能写 HTML 所以值是“服务器”'i'+category.idcategory.id'i'+category.id

标签： angulartypescript

解决方案

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

请参阅此 stackblitz以获取演示。

推荐阅读