列内のイメージをクリックしてprimeng datatable行を強調表示するにはどうすればいいですか？

Question

私は10列でデータを扱うことができます。最後の列にはイメージが含まれています。画像をクリックすると、その行が強調表示されます。

データモードで「シングル」選択モードを追加すると、クリックするとその行が強調表示されます。私はそれを望んでいない。私は、ユーザーが最後の列の画像をクリックしたときにのみ強調表示したい。

誰でも私にそのことを教えていただけますか？あなたがしなければならない何

<p-column> 
     <ng-template let-row="rowData" pTemplate type="body"> 
      <img src="assets/images/info_icon.jpg" style="height:20px;width:20px"> 
     </ng-template> 
    <p-column> 

Answer 1

は、関連する行のプロパティを切り替えるだろう、あなたのイメージにclickイベントを設定することです。そのプロパティをisSelectedと呼ぶことにしましょう。

自分のイメージ列のためのあなたのHTMLコードを

<p-column field="isSelected" header="" [style]="{'width':'32px','cursor': 'pointer'}"> 
    <ng-template pTemplate="body" let-rowData="rowData"> 
    <img src="https://image.flaticon.com/icons/svg/106/106705.svg" (click)="rowData.isSelected=!rowData.isSelected"/> 
    </ng-template> 
</p-column> 

なりその後isRowSelected機能が返すのはisRowSelected

<p-dataTable [value]="cars" [rowStyleClass]="isRowSelected"> 

という名前を聞かせて、関数を呼び出しますされ、あなたのp-dataTableにrowStyleClass PrimeNGプロパティを追加行を選択したかどうかに応じてクラス名を指定します

isRowSelected(rowData: any) { 
    return (rowData.isSelected) ? "rowSelected" : "rowUnselected"; 
} 

最後に、これらの二つのCSSクラスを作成：ここでrowSelectedとrowUnselected

tr.rowUnselected > td { 
    color: black; 
    background-color: white !important; 
} 

tr.rowSelected > td { 
    color: black; 
    background-color: #dff0d8 !important; 
} 

が働いPlunker

です