ngx-datatable 詳細信息行未擴展

Question

我正在嘗試創建一個 ngx-datatable，我可以在任何地方重用它來保持樣式以及編輯等的工作方式。

大多數一切正常，但我無法弄清楚為什么我無法正確擴展詳細信息行。

下面是常用的表格組件 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>

父組件包含要傳遞的列和模板引用的定義：

search-results.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>

僅針對代碼中可能存在的問題，以下是列的設置方式：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);
   
 }

數據出現，展開詳細信息行的圖標也出現。 事件觸發並顯示行數據，但沒有顯示任何內容。

任何幫助將不勝感激！！

Answer 1

我懷疑你的toggleExpandRow方法是錯誤的

我會這樣做：

app.common-table.ts

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

父組件.ts

@ViewChild(AppCommonTableComponent) commonTable: AppCommonTableComponent;

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

你應該修復你的rowDropDownTemplate模板。 它應該是

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

如果你想獲得正確的課程

Plunker 示例

Answer 2

此問題已在 16.0.3 版中修復，請參閱https://github.com/swimlane/ngx-datatable/blob/master/docs/changelog.md