应用于所有 tr angular2 的样式

Question

我正在尝试在 table tr 上应用 background-color 和 [ngClass]。正在应用样式，但它们正在更改所有 tr 的背景颜色。我希望它只特定于被点击的那个。

这是我的代码：

component.html

  <tr *ngFor="let entitydata of extractData" [ngClass]="{'backcolor':selected}" (click)="select(entitydata)">
                  <td>{{entitydata.clientname}}</td>
                  <td>{{entitydata.partner}}</td>
                  <td>{{entitydata.risk}}</td>
                  <td>{{entitydata.evaluationid}}</td>
                  <td>{{entitydata.status}}</td>
                  <td>{{entitydata.approvedondate}}</td>
              </tr>

component.ts

export class Component{
public selected:boolean=false;
select(entitydata){
        this.selected =  this.selected===true ? false : true;
    }
}

component.css

.backcolor{
    background-color:green;
}

感谢您的帮助。

Answer 1

在这里，我明白了你的意思，你可以管理你想要的东西

在您的模板中：

<tr *ngFor="let entitydata of extractData" [ngClass]="{'backcolor': selectedEntity === entitydata }" (click)="select(entitydata)">
    <td>{{entitydata.clientname}}</td>
    <td>{{entitydata.partner}}</td>
    <td>{{entitydata.risk}}</td>
    <td>{{entitydata.evaluationid}}</td>
    <td>{{entitydata.status}}</td>
    <td>{{entitydata.approvedondate}}</td>
</tr>

在你的组件中：

selectedEntity = {};
select(entity)
{
    this.selectedEntity = entity;

}

应用于所有 tr angular2 的样式

styles being applied to all tr angular2

ng-class

angular