基於名稱的 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>

我在這里寫的地方（在i元素中）我想插入我的 .css 類，即item.description + '-icon' （例如 'myClass-icon'）。

我怎樣才能做到這一點？

Answer 1

您可以使用NgClass指令。 就像是：

<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>