角2 Primeng Datatable - クリック時の単一（排他的）行選択

Question

データベースから編集可能なエントリを表示するために、Primengデータテーブルを使用しています。行をクリックすると、新しいコンポーネントが表示され、その行の関連データを編集できます。新しい行がクリックされると、コンポーネントは代わりにその行のデータを表示します。

明らかに、これは排他的です。一度に1行しか選択できません。現在のアクティブな行を別の色で強調表示したいので、新しい行が選択されている場合は、以前に強調表示された行はデフォルトの色にリセットする必要があります。私は私のテンプレートで、次のしている現在では

：

<p-dataTable [value]="rowData" [rowStyleClass]="highlightSelectedRow" [rowHover]="true" (onRowClick)="rowClick($event)"> 

    <ng-template ngFor let-col [ngForOf]="cols"> 
     <p-column [field]="col.field" [header]="col.header"></p-column> 
    </ng-template> 

    </p-dataTable> 

...と私のコンポーネントで：

rowClick($event){ 
    const rowData = $event.data; 
    rowData.selected = !rowData.selected; 
    // and do some other stuff... 
    } 

    highlightSelectedRow(rowData: any, rowIndex: number){ 
    return (rowData.selected) ? 'selected' : ''; 
    } 

...スタイル選択した行のCSS：

.row.selected { 
    background-color: red; 
} 

これは、クリックされた行をハイライトするのと同様に機能しますが、強調表示された行はハイライトされたままです。最良の方法については疑問に思っていますそれらをリセットする。

データのすべての行をループして、selectedプロパティをtrueに設定してfalseに設定すると、データの行の

私はPrimengでこれを行うより良い、組み込みの方法がありませんか？

Answer 1

これは、クリックされた行をハイライト表示する限りは機能しますが、強調表示された行は強調表示されたままです。これらをリセットするにはどうすればよいでしょうか。

な

.row.unselected { 
    background-color: white; 
} 

として非選択行のためのクラスを作成し、行

highlightSelectedRow(rowData: any, rowIndex: number){ 
    return (rowData.selected) ? 'selected' : 'unselected'; 
} 

の選択を解除するたびに、このクラスには影響の詳細については、このまねSO questionまたはPlunkerを参照してください。