javascript - $event 使用 PrimeNG 以 Angular 绑定(bind)

Question

根据 PrimeNG 的文档，它们有 2 个用于表中行扩展的属性。 onRowExpand 和 onRowCollapse。我想更改我单击展开的当前行的背景颜色。

我的 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>

我的 ts 文件:

 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';
  }

我一直在玩我添加的“parentElements”的数量，但我没有运气。我的代码在 PrimeNG 数据表中仅使用 2 个父元素。

Answer 1

如果您在代码中注意到您使用它“扩展”了局部变量，您可以轻松地切换类，就像您使用切换图标的方式一样:

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

您无需处理 onRowExpand 和 onRowCollapse 事件

在 tr 标签上添加 [ngClass]="expanded ? 'edf6faClass' : 'fffClass'"

<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>