ngClass工作不正常

我正在玩ngClass，我不知道我做錯了什麼。它顯示出怪異的行爲。這似乎是當我分配一個函數ngClass它不起作用，但如果我分配它的對象文字它的作品。我怎樣才能讓ngClass與我的組件的功能一起工作？ngClass工作不正常

ProposalForm.ts

import {Component} from 'angular2/core'; 
import {NgClass} from 'angular2/common'; 
@Component({ 
    selector: 'proposal-form', 
    template: ` 
    <div [ngClass]="setClasses()"> 
    ghtfhg 
    </div> 
    <div [ngClass]="{active:true, disabled:true}"> 
    1111111 
    </div>`, 
    directives:[NgClass] 
}) 
export class ProposalForm { 

    setClasses() { 
    return {active:true, disabled:true}; 
    } 
}

看着Chrome的督察，這是HTML

<proposal-form _ngcontent-xxb-2=""> 
<div class=""> 
    ghtfhg 
</div> 
<div class="active disabled"> 
    1111111 
</div></proposal-form>

來源

2016-03-09 WShell

見https://github.com/angular/angular/issues/7426 –

你不提供什麼或如何不工作太多的信息。我認爲問題在於setClasses()總是返回一個不同的對象，而Angulars變化檢測不會這樣。

而應該綁定到字段

classes = {active:true, disabled:true};

和當值這取決於變化然後更新的classes值。

來源

2016-03-09 17:41:36

謝謝你，解決了它。但是，爲什麼沒有將ngClass綁定到一個函數上呢？在這個簡單的例子中，對象不會改變。所以我假定當Angular加載組件並調用它的函數時，它類似於從組件的屬性中讀取對象。 – WShell

是的，它會改變。每次角度更改檢測運行時，它都會計算綁定表達式setClasses（），並且每次獲取新的對象實例時都會進行評估。對Angular來說，內容是一樣的。這是一個新對象，當它比較先前和當前返回的值的身份時，它們是不相等的。 –

@WShell。你正在做的一切正確。但是，我已經向角色團隊報告了這個問題，他們已經證實這是一個錯誤。使用setClass方法從組件中設置類不適用於Angular2的最後幾個版本。現在你必須動態地直列設置你的類是這樣的：

[ngClass]="{active: isOn, disabled: isDisabled}"

希望報告的問題： https://github.com/angular/angular/issues/7426

來源

2016-03-09 17:53:43 Nige

希望這可以幫助你，因爲這似乎更正確 – Nige

ngClass工作不正常

回答

相關問題