Question

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

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

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

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

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

Answer 2

您无法提供有关其无法使用的内容或方式的大量信息。我假设问题是setClasses()总是返回一个不同的对象，并且Angulars更改检测并不是那样。

您应该绑定到字段

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

，然后在值取决于更改时更新classes的值。

ngClass不能正常工作

2 个答案: