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

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

angular angularjs angular2-directives angular-ng-class ng-class
person WShell    schedule 09.03.2016    source источник
comment
См. github.com/angular/angular/issues/7426.   -  person Eric Martinez    schedule 09.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

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

person Günter Zöchbauer    schedule 09.03.2016
comment
Спасибо, это решило это. Но почему не работает привязка ngClass к функции? В этом простом примере объект не меняется. Поэтому я предполагал, что когда Angular загружает компонент и вызывает функцию, это похоже на простое чтение объекта из свойства компонента. - person WShell; 09.03.2016
comment
Да меняется. Каждый раз, когда запускается обнаружение изменений Angular, он оценивает выражение привязки setClasses() и каждый раз получает новый экземпляр объекта. Для Angular не имеет значения, что контент один и тот же. Это новый объект, и когда он сравнивает ранее и в настоящее время возвращенное значение, они не равны. - person Günter Zöchbauer; 09.03.2016

arrow_upward
2
arrow_downward

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

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

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

person Nige    schedule 09.03.2016