Добавить свойство CSS в Angualr2 с MetaWidget

Question

Я пытаюсь добавить CSS при нажатии на строку или столбец таблицы, следующий код

private rowClicked(event: Event): void {
   event.srcElement.setAttribute("class", "highlighted");
}

Но это не работает, как принято. Я делаю неправильно, есть ли альтернативный способ динамического добавления CSS?

Заметка-

Есть ли способ добавить CSS с помощью элемента dom, моя таблица содержит тысячи данных, и для создания этой таблицы я использовал MetaWidget.

Answer 1

Самый простой способ решить вашу проблему - назначить уникальный идентификатор каждому включенному элементу вместе с использованием другой переменной для хранения выбранного идентификатора. Логика для включения my-class Класс CSS теперь будет основан на выбранном идентификаторе.

Ваш новый HTML-шаблон:

<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
  > I'm a div that gets styled on click
</div>

Ваш rowClicked функция:

highlightedDiv: number;

rowClicked(newValue: number) {
  if (this.highlightedDiv === newValue) {
    this.highlightedDiv = 0;
  }
  else {
    this.highlightedDiv = newValue;
  }
}

Рабочее демо здесь.

Больше можно найти здесь.

---

Вы используете MetaWidget, но не упоминаете, какую версию используете.

Если вы хотите работать с Angular2 и MetaWidget, вам следует использовать совместимую версию MetaWidget, которую можно найти здесь:

https://github.com/AmitsBizruntime/MetawidetA2

Использование этой библиотеки будет лучшим решением для вас.

заново

Angular не работает на основе DOM, он работает на основе Component. Если вы любите работать над DOM, то вам следует включить jQuery в тур-проект здесь.

Как использовать jQuery с Angular2?

Но это не очень хорошая практика.