在单击其他单击时更改单击的类名称 - Angular 4

Question

可以帮助我解决这个问题。我的表有不同的列(TD(。我想选择一个单元格并更改其className。当我单击其他单元格时，我想在以前的单元格中还原className，并在新选择的单元格上更改className。请注意：每个单元格都有不同的className。因此，我必须跟踪Pervious类和选定的元素。这是Angular 4应用。我的桌子：

<table class="table package-table stats">
            <tbody>
                <tr *ngIf="deptStatsModel.length>0">
                    <th (click)="setStatsActByDept($event,dt2,null)" class="st-th">ORG</th>
                    <th (click)="setStatsActByDept($event,dt2,'OD')" class="OverDue">Over Due</th>
                    <th (click)="setStatsActByDept($event,dt2,'NA')" class="NeedAttention">Need Att</th>
                    <th (click)="setStatsActByDept($event,dt2,'IA')" class="InProgress">In Prog</th>
                    <th (click)="setStatsActByDept($event,dt2,'CP')" class="Comp">Complete</th>
                </tr>
                <tr *ngFor="let model of deptStatsModel">
                    <td (click)="setActivitiesData($event,model, 'all','DPT')">{{model.deptName}}</td>
                    <td (click)="setActivitiesData($event,model, 'OD','DPT')">{{model.overDue}}</td>
                    <td (click)="setActivitiesData($event,model, 'NA','DPT')">{{model.needAtt}}</td>
                    <td (click)="setActivitiesData($event,model, 'IP','DPT')">{{model.inProg}}</td>
                    <td (click)="setActivitiesData($event,model, 'CP','DPT')">{{model.complete}}</td>
                </tr>
                <tr *ngIf="deptStatsModel.length==0">
                    <td style="text-align: left" colspan="5">No records found</td>
                </tr>
            </tbody>
        </table>

我在下面单击：

setStatsActByDept(event,dt,type)
  {
 var target = event.target || event.srcElement || 
 event.currentTarget;
 this.prevDeptCss=target.cloneNode();
 target.className="selected";
  .........
 }

我不知道下一步要做什么.. help请。

Answer 1

您以错误的方式考虑它。代码不应修改DOM。它应该修改组件的状态。该模板是根据组件状态将CSS类应用于DOM元素的负责人。

假设您的代码似乎暗示，您想选择标题单元格。您的代码应该看起来像以下内容。

在您的组件中：

public selectedHeader: string;

在您的视图中：

<th (click)="selectedHeader = 'ORG'" [ngClass]="selectedHeader === 'ORG' ? 'selected' : 'st-th'">ORG</th>
<th (click)="selectedHeader = 'OverDue'" [ngClass]="selectedHeader === 'OverDue' ? 'selected' : 'OverDue'">Over Due</th>
...