Angular 16 + ngx-datatable 20.1.0嵌套子列显示异常求助

问题说明 #

在使用Angular 16和ngx-datatable 20.1.0时，无法实现列内嵌套子列的表格展示效果，当前表格中week和quarter列显示[object Object]，无法正确渲染子列数据。

数据结构（testdata.json） #

{
    "ermInfo": [
        {
            "name": "abcd",
            "period": {
                "week": {
                    "pushups": "100",
                    "biseps": "5"
                },
                "quarter": {
                    "pushups": "1000",
                    "biseps": "40"
                }
            }
        },
        {
            "name": "zyx",
            "period": {
                "week": {
                    "pushups": "200",
                    "biseps": "10"
                },
                "quarter": {
                    "pushups": "10000",
                    "biseps": "400"
                }
            }
        }
    ]
}

当前代码 #

TypeScript代码 #

import { Component } from '@angular/core';
import { ColumnMode } from '@swimlane/ngx-datatable';
import { ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-users-table',
encapsulation: ViewEncapsulation.None,
templateUrl: './module-table.component.html',
styleUrls: ['./module-table.component.scss'],
})
export class ModuleTableComponent {

    rows = [];
    columnMode = ColumnMode.force;
    columns = [
        {prop: 'name'},
        { name: 'week', children: [
            { prop: 'period.week.pushups', name: 'pushups' },
            { prop: 'period.week.biseps', name: 'biseps' }
          ]},
          { name: 'quarter', children: [
            { prop: 'period.quarter.pushups', name: 'pushups' },
            { prop: 'period.quarter.biseps', name: 'biseps' }
          ]}
    ]
    
    constructor() {
        this.fetch(data => {
            var obj = data.ermInfo;
            
            this.rows = data.ermInfo.map((item: any)=>{
                console.log(item.period['week'].pushups);
                return {
                    name: item.name,
                    week: {
                        lines: item.period['week'].pushups,
                        checkins: item.period['week'].biseps
                    },
                    quarter: {
                        lines: item.period['quarter'].pushups,
                        checkins: item.period['quarter'].biseps
                    }
                };
            });
            console.log(this.rows);
            
    
        });
    }
    
    
    fetch(cb: { (data: any): void; (arg0: any): void; }) {
        const req = new XMLHttpRequest();
        req.open('GET', 'assets/testdata.json');
    
        req.onload = () => {
            cb(JSON.parse(req.response));
        };
    
        req.send();
    }

}

HTML代码 #

<ngx-datatable class="material" [rows]="rows" [columns]="columns" [columnMode]="columnMode"></ngx-datatable>

当前展示效果 #

Name             week           quarter
abcd         [object Object]  [object Object]
zyx          [object Object]  [object Object]

期望展示效果 #

Name             week           quarter
           pushups  biseps  pushups biseps
abcd         100       5      1000     40
zyx          200       10     10000  400

问题原因与解决方案 #

问题根源 #

1. 列配置与数据结构不匹配：columns中子列的prop路径（如period.week.pushups）和rows中实际数据的路径不对应——处理后的rows已经没有period层级，而是直接用week和quarter对象包裹子字段，且子字段名称为lines/checkins，和列配置中的pushups/biseps不匹配。
2. 父列设置了children但未确保子列能正确映射到数据中的字段，导致表格无法解析嵌套列，直接渲染对象字符串。

修改后的代码 #

调整TypeScript中的数据处理与列配置

import { Component } from '@angular/core';
import { ColumnMode } from '@swimlane/ngx-datatable';
import { ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-users-table',
encapsulation: ViewEncapsulation.None,
templateUrl: './module-table.component.html',
styleUrls: ['./module-table.component.scss'],
})
export class ModuleTableComponent {

    rows = [];
    columnMode = ColumnMode.force;
    // 调整列配置的prop路径，匹配处理后的rows结构
    columns = [
        { prop: 'name' },
        { name: 'week', children: [
            { prop: 'week.pushups', name: 'pushups' },
            { prop: 'week.biseps', name: 'biseps' }
          ]},
        { name: 'quarter', children: [
            { prop: 'quarter.pushups', name: 'pushups' },
            { prop: 'quarter.biseps', name: 'biseps' }
          ]}
    ]
    
    constructor() {
        this.fetch(data => {
            this.rows = data.ermInfo.map((item: any)=>{
                // 调整数据结构，让子字段名称和列配置的prop对应
                return {
                    name: item.name,
                    week: {
                        pushups: item.period.week.pushups,
                        biseps: item.period.week.biseps
                    },
                    quarter: {
                        pushups: item.period.quarter.pushups,
                        biseps: item.period.quarter.biseps
                    }
                };
            });
        });
    }
    
    fetch(cb: (data: any) => void) {
        const req = new XMLHttpRequest();
        req.open('GET', 'assets/testdata.json');
    
        req.onload = () => {
            cb(JSON.parse(req.response));
        };
    
        req.send();
    }

}

说明 #

• 确保columns中子列的prop路径完全匹配rows中数据的字段层级（如week.pushups对应rows里每个对象的week.pushups）。
• 处理rows时保持子字段名称和列配置的name/prop一致，避免字段名称不匹配导致无法渲染。
• ngx-datatable的嵌套列要求父列仅设置name和children，无需设置prop，子列通过prop指向具体数据字段即可正常渲染嵌套表头和对应数据。

内容的提问来源于stack exchange，提问作者neo sanny