twitter-bootstrap 如何突出显示 *ngFor 中的选定行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40378562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to highlight a selected row in *ngFor?
提问by Mourad Idrissi
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)
我找不到可以帮助我在 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>
I'm using Angular2 final release
我正在使用 Angular2 最终版本
回答by Joel Almeida
There are plenty of solutions to do this, one of them is you can store the current company when clicked.
有很多解决方案可以做到这一点，其中之一是您可以在单击时存储当前公司。
In the *ngForyou check if the current item is the currentCompanyand you add the class highlightedor whatever class you wish if its the same company.
在*ngFor您检查当前项目是否是，currentCompany然后添加类highlighted或任何您希望的类（如果它是同一家公司）。
export class TableComponent {
public currentCompany;
public selectCompany(event: any, item: any) {
this.currentCompany = item.name;
}
}
And then on your template:
然后在你的模板上：
<tr *ngFor="let item of companies" (click)="selectCompany($event, item)"
[class.highlighted]="item.name === currentCompany">
--
——
Another solution if you wish to have multiple highlighted companies you can add a property highlightedto your item. Then on selectCompany()you just set the property to true. On your check you do [class.highlighted]="item.highlighted".
如果您希望拥有多个突出显示的公司，则另一个解决方案可以highlighted为您的项目添加一个属性。然后，selectCompany()您只需将该属性设置为 true。在你的支票上[class.highlighted]="item.highlighted"。
