html - fila de detalle de ngx-datatable no se expande

Estoy intentando crear un ngx-datatable que pueda reutilizar en todas partes para mantener el estilo y cómo funciona la edición, etc.

Casi todo funciona, pero no puedo entender por qué no puedo hacer que la fila de detalles se expanda correctamente.

Aquí está el componente de tabla común html/template:

common-table.component.html

<div>
  <h3>Results</h3>
  <ngx-datatable 
    #myTable
    class="material expandable"
    [rows]="data"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [externalPaging]="hasServerPaging"
    [count]="tablePaging.count" 
    [offset]="tablePaging.offset" 
    [limit]="tablePaging.limit" 
    (page)='setPage($event)'>
    <ngx-datatable-row-detail *ngIf="hasDetails" [rowHeight]="rowDetailHeight" #myDetailRow [template]="rowDetails" (toggle)="onDetailToggle($event)">
    </ngx-datatable-row-detail>
  </ngx-datatable>
</div>

El componente padre contiene las definiciones de las columnas y los templateRefs para pasar alrededor:

resultados-de-búsqueda.component.html

<ng-template #rowDropDownTemplate let-row="row" ngx-datatable-cell-template>
  <a [class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="!row.$$expanded" title="Expand/Collapse Details"
        (click)="toggleExpandRow(row)">
        </a>
</ng-template>

<ng-template #rowDetailsTemplate let-row="row" ngx-datatable-row-detail-template>
  <div class="uk-grid">
    <div class="uk-width-1-2">
      left-side data
    </div>
    <div class="uk-width-1-2">
      right-side data
    </div>
  </div>
</ng-template>
    
<app-common-table
  *ngIf="results && results.length > 0" 
  [tablePaging]="tablePaging" 
  [columns]="columns" 
  [data]="tableData" 
  [rowDetails]="rowDetailsTemplate" 
  [rowDetailHeight]="200"
  [hasServerPaging]="true" 
  (onPaging)="onPaging($event)"
></app-common-table>

Solo por posibles problemas en el código, aquí se muestra cómo se están configurando las columnas: search-results.component.ts

private setColumns(): void {
    this._columns = [];

    let templateTest: TemplateRef<any>;
   
    let dropDownColumn: TableColumn = {
      width: 50,
      resizeable: false,
      sortable: false,
      draggable: false,
      canAutoResize: false,
      cellTemplate: this.rowDropDownTemplate,
    }
    this._columns.push(dropDownColumn);
  
    let nameColumn: TableColumn = {
      name: "Name",
      width: 120
    };
    this._columns.push(nameColumn);
  
    let positionsColumn: TableColumn = {
      name: "Positions",
      width: 200
    };
    this._columns.push(positionsColumn);
  
    let experienceColumn: TableColumn = {
      name: "Experience",
      width: 80
    };
    this._columns.push(experienceColumn);
  
    let leveleColumn: TableColumn = {
      name: "Level",
      width: 80
    };
    this._columns.push(leveleColumn);
  
    let educationeColumn: TableColumn = {
      name: "Education",
      width: 80
    };
    this._columns.push(educationeColumn);
   
 }

Los datos aparecen y también el icono para expandir la fila de detalles. Los eventos se disparan y muestran los datos de la fila, pero no se muestra nada.

¡Cualquier ayuda sería muy apreciada!

Respuesta #1

Sospecho que tu método toggleExpandRow está equivocado

Lo haría así:

app.tabla-comun.ts

export class AppCommonTableComponent {
  @ViewChild('myTable') myTable: any;

parent.component.ts

@ViewChild(AppCommonTableComponent) commonTable: AppCommonTableComponent;

toggleExpandRow(row) {
  console.log('Toggled Expand Row!', row);
  this.commonTable.myTable.rowDetail.toggleExpandRow(row);
}

Y deberías arreglar tu plantilla rowDropDownTemplate. Debería ser

[class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="row.$$expanded"

Si quieres obtener las clases correctas

Ejemplo de Plunker

Respuesta #2

Este problema está solucionado en la versión 16.0.3. Consulte https://github.com/swimlane/ngx-datatable/blob/master/docs/changelog.md