使用PrimeNG以角度进行$ event绑定

Question

According to the documentation of PrimeNG, they have 2 properties for row expansions in a table. onRowExpand and onRowCollapse.I want to change the background color of the current row I have clicked on to expand.

My html:

<p-table [columns]="cols" [value]="cars" dataKey="vin" expandableRows="true" styleClass="x-expandable-row"
(onRowExpand)="onRowExpandCallback($event)" (onRowCollapse)="onRowCollapseCallback($event)">
   <ng-template pTemplate="header">
      <tr>
          <th style="width: 2.25em"></th>
          <th>Make</th>
          <th>Model</th>
          <th>Color</th>
      </tr>
    </ng-template>
<ng-template pTemplate="body" let-car let-expanded="expanded">
   <tr>
       <td class="x-expand-handeler-row" >
          <a href="#" [pRowToggler]="car">
             <i [ngClass]="expanded ? 'fas fa-minus' : 'fas fa-plus'"></i>
          </a>                                    
       </td>
       <td>{{car.make}}</td>
       <td>{{car.model}}</td>
       <td>{{car.color}}</td>
    </tr>
 </ng-template>
 <ng-template pTemplate="rowexpansion" let-car>
    <td [attr.colspan]="4" class="x-expanded-row">                                                                                          
        <label>Row Details Go Here</label>
    </td>                                                           
 </ng-template>
</p-table>

My ts file:

 onRowExpandCallback(e) {
    //need to find the best way to add and remove a class on expanded row
    e.originalEvent.currentTarget.parentElement.parentElement.parentElement.parentElement.bgColor = "#edf6fa";
  }
  onRowCollapseCallback(e) {
    //need to find the best way to add and remove a class on expanded row
    e.originalEvent.currentTarget.parentElement.parentElement.bgColor = '#fff';
  }

I have been playing with the number of "parentElements" I add, but I didn't have luck. I have the code working in the PrimeNG data-table using only 2 parentElements.

Answer 1

If you notice in your code you have 'expanded' local variable using that you can easily toggle class like how you toggle icons using:

 <i [ngClass]="expanded ? 'fas fa-minus' : 'fas fa-plus'"></i> 

You no need to handle onRowExpand and onRowCollapse events

add [ngClass]="expanded ? 'edf6faClass' : 'fffClass'" on tr tag

 <p-table [columns]="cols" [value]="cars" dataKey="vin" expandableRows="true" styleClass="x-expandable-row" (onRowExpand)="onRowExpandCallback($event)" (onRowCollapse)="onRowCollapseCallback($event)"> <ng-template pTemplate="header"> <tr> <th style="width: 2.25em"></th> <th>Make</th> <th>Model</th> <th>Color</th> </tr> </ng-template> <ng-template pTemplate="body" let-car let-expanded="expanded"> <tr [ngClass]="expanded ? 'edf6faClass' : 'fffClass'"> <td class="x-expand-handeler-row"> <a href="#" [pRowToggler]="car"> <i [ngClass]="expanded ? 'fas fa-minus' : 'fas fa-plus'"></i> </a> </td> <td>{{car.make}}</td> <td>{{car.model}}</td> <td>{{car.color}}</td> </tr> </ng-template> <ng-template pTemplate="rowexpansion" let-car> <td [attr.colspan]="4" class="x-expanded-row"> <label>Row Details Go Here</label> </td> </ng-template> </p-table>