ngClass 无法正常工作答案

【问题标题】：ngClass is not working like it shouldngClass 无法正常工作
【发布时间】：2016-06-24 05:58:05
【问题描述】：

我正在玩 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>

【问题讨论】：

见github.com/angular/angular/issues/7426

标签： angularjs angular ng-class angular2-directives angular-ng-class

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您没有提供太多关于它不起作用或如何不起作用的信息。我认为问题在于setClasses() 总是返回不同的对象，而 Angulars 更改检测不喜欢这样。

您应该改为绑定到一个字段

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

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

【讨论】：

谢谢，解决了。但是，为什么将 ngClass 绑定到函数不起作用？在那个简单的例子中，对象没有改变。所以我假设当 Angular 加载组件并调用函数时，它类似于从组件的属性中读取对象。
是的，它改变了。每次运行 Angular 更改检测时，它都会评估绑定表达式 setClasses() 并且每次它获取一个新的对象实例。内容相同对 Angular 来说并不重要。它是一个新对象，当它比较先前和当前返回值的标识时，它们不相等。