Как добавить класс во всю строку таблицы в угловых

Question

стол с tr в нем.Теперь я хотел бы, чтобы вы щелкнули по этой строке таблицы, изменился цвет фона.Почему я хочу это, потому что я использую древовидную таблицу, чтобы открыть эту строку таблицы.И мне бы хотелось, если бы вы щелкнули по этой строке таблицы, чтобы изменился цвет фона всей строки.Теперь, если я закрою эту строку таблицы (нажав на нее снова), я бы хотел, чтобы фоновый цвет вернулся к нормальному состоянию

<ng-template pTemplate="header">
            <tr>
                <th>Bedrijsnaam</th>
                <th>Bedrijfstype</th>
                <th>Status</th>
                <th>Bank</th>
            </tr>
        </ng-template>

Это та тема, о которой я говорю.Я пытался использовать ng-class, но безуспешно.Кто-нибудь знает, как это сделать?

Answer 1

Это еще одно решение, и вам не нужно создавать свойство в компоненте

<tr #tr (click)="tr.classList.toggle('active')" >
      ....
</tr>

demo

Answer 2

Table.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  tableRowClicked = false;

  toggleTableRowClicked() {
    this.tableRowClicked = !this.tableRowClicked;
  }
}

• Создайте переменную экземпляра tableRowClicked для управления нажатием на строку таблицы или нет.
• Создание функции переключения для переключения переменной true или false.

Table.component.html

<div>
  <table>
    <tr (click)="toggleTableRowClicked()" [class.table__row--clicked]="tableRowClicked">
      <th>Bedrijsnaam</th>
      <th>Bedrijfstype</th>
      <th>Status</th>
      <th>Bank</th>
    </tr>
  </table>
</div>

• Вызовите функцию переключения с помощью обработчика щелчка на <tr>
• . Примените класс table__row--clicked, когда tableRowClicked=true

Table.component.css

.table {
  &__row {
    &--clicked {
      background-color: red;
    }
  }
}

• CSS, чтобы сделать background-color: red; при tableRowClicked = true

Answer 3

Вы можете использовать (click) и [ngClass] на tr.

Пример:

   <tr (click)="toggleClass()" [ngClass]="{active: className}">
      ....
    </tr>

в тс

let className = "";

toggleClass(){
 if(this.className === "active"){
    this.className = "" 
}else{
   this.className = "active";
 }
}

в csss

.active{
   background-color: yellow;
 }

Обратите внимание, что это реализация для одного tr, вам может понадобиться прикрепить этот className для каждой строки.