按 ngx-datatable 中的对象行对行进行分组

如何解决按 ngx-datatable 中的对象行对行进行分组

我有一个表，需要按行属性分组，问题是这个行字段是另一个对象的对象，当我把这个对象放在表的分组属性中时，它不起作用. 它仅适用于物业在外面的情况。

https://stackblitz.com/edit/angular-ngx-datatable-row-grouping-and-row-detail-tdkr1a?file=src%2Fapp%2Fapp.component.html

我需要按 proyecto.tipoProyecto.nombre 分组

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

[
    {
        "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,"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."
    }
]