如何突出显示*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".