css - 如何突出显示* ngFor中的选定行？

我找不到可以帮助我在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最终版本

最佳答案

有很多解决方案可以做到这一点，其中之一就是您可以在单击时存储当前公司。

在*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"。