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's Inspector, это HTML

<proposal-form _ngcontent-xxb-2="">
<div class="">
  ghtfhg
</div>
<div class="active disabled">
  1111111
</div></proposal-form>
Источник

2 ответа

Решение

Вы не предоставляете много информации о том, что или как это не работает. Я полагаю, проблема в том, что setClasses() всегда возвращает другой объект, и обнаружение изменений Angulars не нравится.

Вы должны вместо этого привязать к полю

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

а затем обновить значение classes когда значение зависит от изменений.

Источник

@WShell. Вы все делаете правильно. Тем не менее, я сообщил об этой проблеме в угловую команду, и они подтвердили, что это ошибка. Установка классов, как у вас, из компонента с помощью метода setClasses не работает в последних нескольких сборках Angular2. На данный момент вы должны установить ваши классы динамически встроенными, как это:

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

Как и к сообщаемой проблеме: https://github.com/angular/angular/issues/7426

Источник
Другие вопросы по тегам