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>

我在 i 元素中写 HERE 的位置，要插入item.description + '-icon'的.css类（例如'myClass-icon'）。

我该怎么做？

Answer 1

您可以使用NgClass directive。像这样：

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

Answer 2

尝试一下

<i class="sidebar-icon {{item.description}}-icon"></i>

Answer 3

要获得预期的结果，请使用以下使用ngClass的选项

<i class="sidebar-icon" [ngClass]="item.description?item.description + '-icon': ''"></i>

基于名称的CSS类

3 个答案: