ngClass 没有正常工作

Question

我正在玩弄 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 的 Inspector，这是 HTML

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

Answer 1

您没有提供太多关于什么或如何不起作用的信息。我假设问题是 setClasses() 总是 returns 一个不同的对象，而 Angulars 变化检测不喜欢那样。

您应该绑定到一个字段

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

然后在 classes 所依赖的值发生变化时更新 classes 的值。

Answer 2

@WShell。你做的一切都正确。但是，我已将此问题报告给 angular 团队，他们已确认这是一个错误。像使用方法 set类从组件设置类一样，在 Angular2 的最后几个版本中不起作用。现在你必须像这样动态地设置你的类内联：

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

喜欢报告的问题： https://github.com/angular/angular/issues/7426

ngClass 没有正常工作

ngClass is not working like it should

angularjs

ng-class

angular-ng-class

angular2-directives

angular