Angular 在ngx数据表中按对象行分组行
我有一个表,我需要用一个row属性对它进行分组,问题是这个row字段是另一个对象的对象,当我把这个对象放在表的grouping属性中时,它不起作用。 仅当属性位于外部时,它才起作用 我需要按proyecto.tipoProyecto.nombre分组Angular 在ngx数据表中按对象行分组行,angular,ngx-datatable,Angular,Ngx Datatable,我有一个表,我需要用一个row属性对它进行分组,问题是这个row字段是另一个对象的对象,当我把这个对象放在表的grouping属性中时,它不起作用。 仅当属性位于外部时,它才起作用 我需要按proyecto.tipoProyecto.nombre分组 <div> <h3> Row Grouping <small> <a href="https://github.com/swimlane/ngx-datatabl
<div>
<h3>
Row Grouping
<small>
<a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-grouping.component.ts" target="_blank">
Source
</a>
</small>
</h3>
<ngx-datatable #myTable class='material expandable' [rows]="rows" [groupRowsBy]="'proyecto'" [columnMode]="'force'"
[scrollbarH]="true" [headerHeight]="50" [footerHeight]="50" [rowHeight]="40" [limit]="4"
[groupExpansionDefault]="true">
<!-- Group Header Template -->
<ngx-datatable-group-header [rowHeight]="50" #myGroupHeader (toggle)="onDetailToggle($event)">
<ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
<div style="padding-left:5px;">
<a href="#" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded"
title="Expand/Collapse Group" (click)="toggleExpandGroup(group)">
<b>Age: {{group.value[0].proyecto.tipoProyecto.nombre}}</b>
</a>
</div>
</ng-template>
</ngx-datatable-group-header>
<!-- Row Column Template -->
<ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
[canAutoResize]="false">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a href="javascript:void(0)" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded"
title="Expand/Collapse Row" (click)="toggleExpandRow(row)">
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Name" prop="name" editable="true"></ngx-datatable-column>
<ngx-datatable-column name="Gender" prop="gender"></ngx-datatable-column>
<ngx-datatable-column name="Age" prop="age"></ngx-datatable-column>
<ngx-datatable-column name="Comment" prop="comment">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" let-group="group"
let-rowHeight="rowHeight">
<input autofocus
(blur)="updateValue($event, 'comment', rowIndex)"
type="text"
name="comment"
[value]="value"/>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
我看到您正在使用版本13。我想他们在第16版左右修复了它。我更新了图书馆,不工作了。
[
{
"exppayyes": 1,
"exppayno": 0,
"exppaypending": 0,
"source": "Funder",
"name": "Ethel Price",
"gender": "female",
"company": "Johnson, Johnson and Partners, LLC CMP DDC",
"age": 22,
"proyecto": {
"codigo": "DR-4000",
"tipoProyecto": {
"nombre": "Controlado por documento"
}
},
"comment": "test1",
"groupcomment": "group comment test with multiple lines of text. group comment test with multiple lines of text."
},
{
"exppayyes": 0,
"exppayno": 1,
"exppaypending": 0,
"source": "Calculated",
"name": "Wilder Gonzales",
"gender": "male",
"company": "Geekko",
"age": 23,
"proyecto": {
"codigo": "DR-4001",
"tipoProyecto": {
"nombre": "Controlado por HH"
}
},
"comment": "test2",
"groupcomment": "group comment test with multiple lines of text. group comment test with multiple lines of text."
}
]