首页 文章

ngx-datatable详细信息行未扩展

提问于
浏览
2

我正在尝试创建一个ngx-datatable,我可以在任何地方重复使用以保持样式和编辑等工作 .

大多数一切都有效,但我无法弄清楚为什么我不能让细节行正确扩展 .

这是常用的表组件html / template:

共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>

父组件包含要传递的列和templateRefs的定义:

搜索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>
</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);

  }

将显示数据,图标也会显示,以展开详细信息行 . 事件触发并显示行数据,但不显示任何内容 .

任何帮助将不胜感激!!

1 回答

  • 0

    我怀疑你的 toggleExpandRow 方法是错误的

    我会这样做:

    app.common-table.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);
    }
    

    你应该修复你的 rowDropDownTemplate 模板 . 它应该是

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

    如果你想获得正确的课程

    Plunker Example

相关问题