使用 ngClass 的條件類值 - Angular

Question

我想應用多個類，但與 Stackoverflow 的其他問題相比，這里存在一些差異。

我必須動態分配icon類和'not-selected'

組件.ts

list = [ { name: 'Name1', icon: 'icon_1' }, { name: 'Name2', icon: 'icon_2' } ]

<div *ngFor="let data of list" 
    [ngClass]="{ 'some_icon' : true , 'not-selected': selectedOperation?.name !== operation.name }"> 
    {{data.name}} 
</div>

我可以看到some_icon但我需要的是動態分配data.icon 。 就像是：

<div *ngFor="let data of list" 
    [ngClass]="{ data.icon , 'not-selected': selectedVal?.name !== data.name }"> 
    {{data.name}} 
</div>

但這不是正確的語法。 我錯過了什么？

Answer 1

您可以嘗試使用[class]輸入。

<div *ngFor="let data of list" [class]="data.icon"
    [ngClass]="{'not-selected': selectedVal?.name !== data.name }"> 
    {{data.name}} 
</div>

Answer 2

在使用[ngClass]您有 3 個選項，如果值返回 true（真實），則一個給對象的鍵將是類名。 其他的是常規字符串和數組列表，但您不能使用它們的組合。 對於您的情況，您可以使用class和[ngClass]的組合，這樣您也可以在 HTML 中使用靜態類名。

class="{{iconName}} static-class-name" [ngClass]="{'redClass': useRedClass}"

您必須定義類似於以下數據的數據。

export class AppComponent {
  title = "CodeSandbox";
  iconName = 'icon1';
  useRedClass = true;
}

Answer 3

當動態事件發生會觸發您的圖標更改時，再次分配您的列表

private myDynamicChangeHandler = () => {
    this.list = [ { name: 'Name1', icon: this.useIcon1 ? 'icon_1' : 'icon_2' }, { name: 'Name2', icon: this.useIcon1 ? 'icon_1' : 'icon_2' } ]`
};

Answer 4

我已經成功地使用字符串插值和管道將動態圖標類添加到“普通” class屬性字符串。 也許它也適合你。 記得在類名之間添加空格

<div *ngFor="let data of list" 
    [class]="{{data.icon}} + ' ' +'otherDivClass redIconColorClass'"> 
    {{data.name}} 
</div>