Question

我们有一个基于将数字字段设置为1或2或显示某些图标的解决方案。可以。

<span *ngIf="config.icon"
      [class.fas]="true"
      [class.fa-plus]="icon===1"
      [class.fa-minus]="icon===2"
      class="indicator">
</span>

我很快就会知道，我们将有一堆这样的图标（大约15种不同的图标）。建议的解决方案是放入15行特定的类分配，或者构建一个专门的组件来管理该类。

我既反对又反对，但是当我尝试并且谷歌搜索导致无关紧要的点击时却没有解决。可能由于我的无能而认出了这些好东西。

是否可以执行以下 pseudo 代码行之一？怎么样？

      [class.fa-{{iconName}}]="true"
      [class]="iconName"

修改

基于评论/答案，我可以使用以下内容进行操作。

<span *ngIf="config.icon"
      [ngClass]='{ "fas": true, "fa-plus": true }'></span>

但是，由于某种原因，使用以下语法我什么都没得到。

 <span *ngIf="config.icon"
        [ngClass]="classes"></span>

...
classes: { "fas": true, "fa-plus": true };

我想念什么？

Answer 1

您可以尝试以下操作：

<span class= "indicator"
  [class.fas]="true"
  [ngClass]="'fa-' + iconName">
</span>

请参见https://stackblitz.com/edit/angular-mgecjw

上的工作示例

是否可以将类传递给Angular中的绑定属性？

1 个答案: