Question

我正在尝试将background-color与[ngClass]一起应用于表格tr。样式正在应用但它们正在改变所有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

1 个答案: