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

Posted 2023-03-05

【中文标题】如何突出显示 *ngFor 中的选定行？

【英文标题】：How to highlight a selected row in *ngFor?

【发布时间】：2017-03-15 16:24:34

【问题描述】：

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

【参考方案1】：

我知道这已在不久前得到回答，但要扩展已接受的答案，您还可以使用 [ngClass]="'class_name': item.id === currentCompany "。表格悬停可能需要移除，因为它可能会隐藏背景颜色的变化

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" [ngClass]="'class_name': item.id === currentCompany  " >

然后是css

.class_name background-color: yellow; 

【参考方案2】：

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

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

【讨论】：

直到现在我才意识到你可以绑定到 [class.someclass]。我在任何 Angular 文档中都没有遇到过它。这也是我的答案。

这帮助了我。如果您希望尽可能多地保留模板之外的逻辑，您还可以在类绑定中提供比较功能。

感谢您的指导。以我为例，它解决了将对象分配给我的变量并比较整个对象而不像“item.name”

多个突出显示的公司是我的问题的关键。解决方案运行良好。