html - 基于名称的 CSS 类

Question

在我的 .css 文件中，我有多个类代表我的网页图标。根据我从代码中检索到的内容，我想更改图标。

<ng-container *ngFor="let item of parameterStruct">
   <span class="m-menu__link-wrap">
     <i class="sidebar-icon HERE"></i>
       <span class="m-menu__link-text icon-padding sideBar-text"
          style="padding-left: 15px; font-size: 12px"> 
           {{ item.description |translate }}
        </span>
   </span>
</ng-container>

我在 HERE 写的地方(在 i 元素中)我想插入我的 .css 类，即 item.description + '-icon'(例如“myClass-icon”)。

我该怎么做？

Answer 1

您可以使用 NgClass directive .像这样的东西:

<i class="sidebar-icon" [ngClass]="{'first-icon': item.description === 'first', 'second-icon': item.description === 'second'}"></i>