Angular Primeng组织图表无法渲染API数据，页面空白求助

尝试将API返回的数据绑定到PrimeNG Organization Chart组件，但页面显示空白，无法渲染出组织图表。期望能正确绑定API数据并展示图表，以下是我的代码：

HTML代码 #

<h1>Org Chart</h1>

<p-organizationChart [value]="data1" selectionMode="single">
    <ng-template let-node pTemplate="person">
        <div class="node-header">{{node.label}}</div>
        <div class="node-content">
            <div>{{node.data.name}}</div>
        </div>
    </ng-template>
    <ng-template let-node pTemplate="department">
        {{node.label}}
    </ng-template>
</p-organizationChart>

TypeScript代码 #

ngOnInit(): void {
    this.loadData();
}

loadData() {
    this.service.getOrgChartData().subscribe(
        (res) => {
            this.data = res;
            this.root = this.data.d.filter((obj) => obj.OrgLevel == 0)[0];
            this.treeData.label = 'CEO';
            this.treeData.data = { name: 'xxxx' };
            this.treeData.type = 'person';
            this.treeData.expanded = true;
            this.treeData.children = [];
            this.data1.push(this.treeData);
            console.log('-- root data nnn---', this.data1);
        },
        (error) => {
            console.log('error --', error);
        }
    );
}

排查与解决要点 #

1. 确保数据变量正确初始化 #

组件类中必须提前初始化data1为数组、treeData为新对象，否则无法触发Angular的变更检测：

// 组件类中添加初始化代码
data1: any[] = [];
treeData: any = {};

2. 完整构建树形数据结构 #

当前代码仅创建了根节点，未处理API返回的子节点数据。需要递归遍历API数据，构建符合PrimeNG要求的树形结构：

// 新增递归构建方法
private buildTree(nodes: any[], parentLevel: number): any[] {
    return nodes
        .filter(node => node.OrgLevel === parentLevel + 1)
        .map(node => ({
            label: node.OrgName, // 替换为API返回的实际名称字段
            type: node.IsPerson ? 'person' : 'department', // 根据API数据判断节点类型
            data: { name: node.EmployeeName }, // 对应模板中的data.name字段
            expanded: true,
            children: this.buildTree(nodes, node.OrgLevel)
        }));
}

// 修改subscribe中的逻辑
loadData() {
    this.service.getOrgChartData().subscribe(
        (res) => {
            this.data = res;
            const rootNode = this.data.d.find(obj => obj.OrgLevel === 0);
            
            // 创建全新的根节点对象
            const treeRoot = {
                label: 'CEO',
                data: { name: 'xxxx' },
                type: 'person',
                expanded: true,
                children: this.buildTree(this.data.d, rootNode.OrgLevel)
            };
            
            this.data1 = [treeRoot]; // 直接赋值数组替代push操作，更易触发变更检测
        },
        (error) => {
            console.log('error --', error);
        }
    );
}

3. 手动触发变更检测（可选） #

如果数据更新后组件仍未渲染，可注入ChangeDetectorRef手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

// 组件构造函数中注入依赖
constructor(private cdr: ChangeDetectorRef) {}

// 在subscribe的next回调末尾添加
this.cdr.detectChanges();

4. 检查模块与样式依赖 #

确保已在NgModule中导入OrganizationChartModule，且全局样式包含PrimeNG的组织图表样式：

// 所在模块文件中添加导入
import { OrganizationChartModule } from 'primeng/organizationchart';

@NgModule({
    imports: [
        // ...其他模块
        OrganizationChartModule
    ]
})

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