* ngFor에서 선택한 행을 강조 표시하는 방법?

Question

Angular2에서이 문제를 해결하는 데 도움이 될만한 것을 찾을 수 없습니다. 행을 선택할 때 CSS 클래스를 설정하고 싶습니다.

<table class="table table-bordered table-condensed table-hover"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Website</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of companies" (click)="selectedCompany(item, $event)"> 
      <td>{{item.name}}</td> 
      <td>{{item.email}}</td> 
      <td>{{item.website}}</td> 
     </tr> 
    </tbody> 
</table> 

(jQuery를 사용하지 않고) 내가 Angular2 최종 버전을 사용하고

는

Answer 1

이 작업을 수행하는 솔루션의 많음이있다, 그들 중 하나를 클릭 할 때 현재 회사를 저장할 수있다.

에서 현재 항목이 currentCompany인지 확인하고 동일한 회사 인 경우 원하는 등급으로 highlighted을 추가합니다. 템플릿에

export class TableComponent { 

    public currentCompany; 

    public selectCompany(event: any, item: any) { 

    this.currentCompany = item.name; 
    } 

} 

: 그리고

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" 
[class.highlighted]="item.name === currentCompany"> 

-

여러 당신이 당신의 품목에 속성 highlighted을 추가 할 수있는 회사를 강조해야 할 경우 또 다른 솔루션입니다. 그런 다음 selectCompany()에서이 속성을 true로 설정하면됩니다. 귀하의 수표에 [class.highlighted]="item.highlighted".