3

我在玩 ngClass，我不知道我做错了什么。它表现出奇怪的行为。似乎当我为 ngClass 分配一个函数时它不起作用，但如果我为它分配一个对象文字它就起作用了。如何让 ngClass 使用我的组件功能？

提案表格.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>
4

2 回答 2

2

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

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

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

于 2016-03-09T17:53:43.923 回答
1

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

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

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

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

于 2016-03-09T17:41:36.003 回答