primeng rowStyleClass 无法按预期工作答案

【问题标题】：primeng rowStyleClass does not work as expectedprimeng rowStyleClass 无法按预期工作
【发布时间】：2017-05-01 06:47:44
【问题描述】：

我的 angular 2 应用程序中有一个primeng 数据表 (1.1.0)，我正在使用 rowStyleClass 将一个类设置为展开的行。

问题是，当行被消耗时它工作正常，但如果我折叠它，它仍然是扩展类。

组件

  rowStyle(rowData: any, rowIndex: number): string {
    if ((this as DataTable).isRowExpanded(rowData)) {
      return 'ui-state-highlight';
    } else {
      return '';
    }
  }

查看

<p-dataTable tableStyleClass="table" *ngIf="model.result.length > 0" [rows]="itemsPerPage" [paginator]="isPaginatorVisible()"
      (onSort)="resetPagination()" [value]="xModel.ergebnis" [(selection)]="selected" expandableRows="true" [rowStyleClass]="rowStyle">
...

展开后的行：

<tr class="ui-datatable-even ui-datatable-odd ui-state-highlight ui-widget-content" ng-reflect-klass="ui-widget-content ui-state-highlight" ng-reflect-ng-class="[object Object]">

然后折叠：

<tr class="ui-datatable-even ui-datatable-odd ui-widget-content ui-state-highlight" ng-reflect-klass="ui-widget-content" ng-reflect-ng-class="[object Object]">

如您所见，ui-state-highlight 仅从 ng-reflect-klass 中删除，而不是从类本身中删除。是错误还是我做错了什么？

【问题讨论】：

有人有想法吗？
看来您做得对，而且此功能已损坏。 collapseRow 选项也不提供解决方案。这张票提出了一个 hacky CSS 解决方法：github.com/primefaces/primeng/issues/1845p-datatable tbody > tr:not(.ui-widget-content)
尝试手动检测更改并在更改后更新视图 - 使用 Angular 的 ChnageDetector：if (!this.changeDetectorRef['destroyed']) { this.changeDetectorRef.detectChanges(); }

标签： angular datatable primeng

【解决方案1】：

尝试在更改后手动检测更改并更新视图 - 使用 Angular 的 ChnageDetector：

import {ChangeDetectorRef} from '@angular/core';

constructor(private changeDetectorRef: ChangeDetectorRef) {}

  rowStyle(rowData: any, rowIndex: number): string {
    if ((this as DataTable).isRowExpanded(rowData)) {
      return 'ui-state-highlight';
    } else {
      return '';
    }
    if (!this.changeDetectorRef['destroyed']) {
          this.changeDetectorRef.detectChanges();
    }
  }

【讨论】：