Как выделить выделенную строку в * ngFor?

Question

Я не мог найти что-то, что поможет мне решить эту проблему в Angular2. Я хотел бы задать класс css, когда я выберу строку. (Без использования JQuery)

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

Я использую Angular2 финальный релиз

Answer 1

Есть много решений, чтобы сделать это, один из них вы можете сохранить текущую компанию при нажатии.

В *ngFor вы проверяете, является ли текущий элемент 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".