다른 클래스 클릭시 클래스 이름 변경 - 각도 4

Question

이 문제를 해결할 수있는 사람이 있습니까? 다른 열 (TD)이있는 테이블이 있습니다. 하나의 셀을 선택하고 클래스 이름을 변경하려고합니다. 다른 셀을 클릭하면 이전 셀의 클래스 이름을 복원하고 새로 선택된 셀의 클래스 이름을 변경하려고합니다. 참고 : 각 셀의 클래스 이름이 다릅니다. 그래서 전 클래스와 선택된 요소를 추적해야합니다. 이것은 Angular 4 어플리케이션입니다. 내 테이블 : 나는 next..help하십시오 무엇을 잘 모릅니다

setStatsActByDept(event,dt,type) 
    { 

var target = event.target || event.srcElement || 
event.currentTarget; 

this.prevDeptCss=target.cloneNode(); 
target.className="selected"; 

    ......... 
} 

:

<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> 

내가 아래 클릭에 있습니다.

Answer 1

잘못된 방식으로 생각하고 있습니다. 코드는 DOM을 수정해서는 안됩니다. 구성 요소의 상태를 수정해야합니다. 템플릿은 구성 요소의 상태에 따라 DOM 요소에 CSS 클래스를 적용하는 역할을하는 템플릿입니다.

코드가 헤더 셀을 선택한다고 가정하는 것으로 가정합니다. 코드는 다음과 같이 보일 것입니다. 구성 요소에서

:

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> 
...