Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/419.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用PrimeNG在angular中进行$event绑定_Javascript_Angular_Primeng - Fatal编程技术网

Javascript 使用PrimeNG在angular中进行$event绑定

Javascript 使用PrimeNG在angular中进行$event绑定,javascript,angular,primeng,Javascript,Angular,Primeng,根据priming的文档,它们在表中有两个行扩展属性。onRowExpand和onRowCollapse。我想更改单击以展开的当前行的背景色 我的html: <p-table [columns]="cols" [value]="cars" dataKey="vin" expandableRows="true" styleClass="x-expandable-row" (onRowExpand)="onRowExpandCallback($event)" (onRowCollapse)="

根据priming的文档,它们在表中有两个行扩展属性。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>

我一直在玩一些我添加的“parentElements”,但我没有运气。我的代码仅使用2个parentElements在Priming数据表中工作。

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


如果您注意到您的代码中有“扩展”的局部变量,您可以像切换图标一样轻松地切换类:这非常好!!非常感谢。为了寻求更多的学习,你知道我如何使用$event完成它吗?
 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';
  }