ngx-datatable详细信息行未扩展 [英] ngx-datatable detail row not expanding
问题描述
我正在尝试创建一个ngx数据表,该表可以在各处重复使用以保持样式以及如何进行编辑等工作.
I am attempting to create a ngx-datatable that I can reuse everywhere to keep styling and how editing, etc work.
大多数内容都可以正常运行,但是我无法弄清楚为什么无法使详细信息行正确展开.
Most everything works but I cannot figure out why I cannot get the details row to expand properly.
这是常见的表格组件html/template:
Here is the common table component html/template:
common-table.component.html
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>
父组件包含要传递的列和templateRefs的定义:
The parent component contains the definitions for the columns and templateRefs to pass around:
search-results.component.html
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
Just for possible issues in the code, here is how the columns are being set: 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);
}
出现数据,图标也将出现,以展开详细信息行.事件触发并显示行数据,但什么也没显示.
The data appears and so does the icon to expand the details row. Events fire and show the row data, but nothing is shown.
任何帮助将不胜感激!
推荐答案
我怀疑您的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
模板.应该是
And you should fix your rowDropDownTemplate
template. It should be
[class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="row.$$expanded"
如果您想获得正确的课程
If you want to get the right classes
Plunker Example
这篇关于ngx-datatable详细信息行未扩展的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!