如何突出显示* ngFor中的选定行? [英] How to highlight a selected row in *ngFor?

问题描述

我找不到可以帮助我在Angular2中解决此问题的东西.我想在选择一行时设置一个CSS类. (不使用jQuery)

I couldn't find something that will help me to solve this issue in Angular2. I'd like to set a css class when I select a row. (without using 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最终版本

I'm using Angular2 final release

推荐答案

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

There are plenty of solutions to do this, one of them is you can store the current company when clicked.

在*ngFor中，检查当前项目是否为currentCompany，并添加类highlighted或如果希望使用同一公司，则添加所需的任何类.

In the *ngFor you check if the current item is the currentCompany and you add the class highlighted or whatever class you wish if its the same company.

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

Another solution if you wish to have multiple highlighted companies you can add a property highlighted to your item. Then on selectCompany() you just set the property to true. On your check you do [class.highlighted]="item.highlighted".

这篇关于如何突出显示* ngFor中的选定行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！