Question

其中包含tr的表。现在，我想如果您单击该表行，则背景颜色会更改。为什么要这样做是因为我正在使用树形表打开此表行。如果您单击此表行，我希望整个行的背景颜色都发生变化。现在，如果我关闭此表行（再次单击它），我希望backgroundcolor恢复为正常

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

这是我正在谈论的tr。我尝试使用ng-class，但没有任何运气。有人知道该怎么做吗？

Answer 1

您可以在(click)上使用[ngClass]和tr。

Ex：

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

以ts

let className =“”;

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

在csss中

.active{
   background-color: yellow;
 }

请注意，此实现是针对一个tr的，您可能需要为每行附加此className。

Answer 2

这是另一种解决方案，您无需在组件中创建属性

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

demo

Answer 3

Table.component.ts

class foo: ObservableObject
{
private int _x;
public int x
{
    get
    {
        return _x;
    }
    set
    {
        _x = value;
        OnPropertyChanged("x");
    }
}
class bar : ObservableObject
{
    private foo _y;
    public foo y
    {
        get
        {
            return _y;
        }
        set
        {
            if (_y!=null)
            {
                _y.PropertyChanged -= _y_PropertyChanged;
            }

            _y = value;
            _y.PropertyChanged += _y_PropertyChanged;

            OnPropertyChanged("y");
            OnPropertyChanged("pow");
        }
    }

    private void _y_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        //if(e.PropertyName == "x");
        //{
        OnPropertyChanged("pow");
        OnPropertyChanged("y");
        //}
    }

    public int pow { get { return _y.x * 2;} }
}

创建一个实例变量var newNode = orgChart.insertNode(parentID, data); var newNodeId = newNode.id; orgChart.config.customize[newNodeId] = {color: "red"} orgChart.loadFromJSON(orgChart.nodes, true);来管理是否单击了表行。
创建一个切换函数来切换变量true或false。

Table.component.html

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上的点击处理程序调用切换功能
在<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.component.css

table__row--clicked

在tableRowClicked=true时制作.table { &__row { &--clicked { background-color: red; } } }的CSS

如何以角形向整个表行添加类

3 个答案:

以ts

在csss中