Angular 2如何使用ngClass的值的變量

我想要將一個變量用於將添加到班級列表中的ngClass的值。我的用例是我有一個圖像精靈的集合，有基礎精靈，然後是一個活動狀態，它與基礎精靈的文件名相同，只有'-active'添加到結尾。我通過給元素添加一個匹配所需的精靈文件名的類來將精靈添加到文檔中。當用戶懸停在元素上時，我需要在兩個精靈之間來回切換。我怎麼做？Angular 2如何使用ngClass的值的變量

例如像這樣（注：tool.name ===精靈的文件名稱顯示）：

<li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'> 
    <span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'>{{tool.name}}</span> 
</li>

來源

2016-12-01 efarley

您是否需要像切換isActive之類的動態true/false之間的動態？ –

不，每個tool.name都匹配一個精靈的文件名，另外每個精靈都有一個同名的第二個文件，但是添加了-active。我需要在懸停的兩個精靈之間切換。 – efarley

在具有.tool-name-active類代替你可以有你的類爲.tool-name.active 然後您可以執行以下操作：

<li *ngFor='let tool of tools'> 
    <span class="{{tool.name}}" [ngClass]='{active: isActive}'>{{tool.name}}</span> 
</li>

來源

2016-12-02 00:52:57 lthh89vt

。 -active是一個精靈名稱，所以我需要整個字符串。例如，如果isActive爲false，則結果爲.color-btn;如果isActive爲true，則結果爲.color-btn-active。 .color-btn.active只會加載名爲color-btn的精靈。 – efarley

我的意思是如果可能的話，你可以將你的css類名從.color-btn-active改爲.color-btn.active。 – lthh89vt

這不是，正如我所說我需要該類.color-btn-active，以便它匹配color-btn-active.png我也需要.color-btn，以便它匹配color-btn.png。如果我沒有這些類匹配文件名，那麼精靈不會加載。 – efarley

也許使用函數返回ngClass數組將有所幫助。

<li *ngFor='let tool of tools'><span [ngClass]='chkClass(tool)'>{{tool.name}}</span></li> 


public chkClass(item:any){ 
    let newClass = {}; 
    newClass[item.name+ '-active'] = true; 
    newClass[item.name] = false; 
    return newClass; 
}

來源

2016-12-02 01:08:54

Angular 2如何使用ngClass的值的變量

回答

相關問題