【问题标题】：Angular primeng organization chart from api call来自 api 调用的 Angular primeng 组织结构图
【发布时间】：2023-02-24 05:13:55
【问题描述】：

我正在尝试将 API 值分配给 primeng 组织结构图但不起作用。它显示空白页。我尝试了如下代码。

我希望将 API 值分配给 primeng 组织结构图并显示该结构图。

网页格式

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

TS

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);
      }
    );

【问题讨论】：

标签： angular api primeng orgchart

【解决方案1】：

您可以尝试组织结构图 JS： https://balkan.app/OrgChartJS/Docs/Angular 随时询问有关它的任何问题。

【讨论】：

【解决方案2】：

对于遇到此问题的任何人，我通过使用@ViewChild 来引用组织结构图并自动刷新来解决。

在组件中：

@ViewChild(OrganizationChart)
  org : OrganizationChart;

在您的 API 订阅方法中（加载数据后）：

this.org.cd.detectChanges();

免责声明：

在 ngOnInit()（我使用的）内部使用它存在一些顾虑，一些人建议使用另一个生命周期挂钩 (AfterViewInit) 来保证将图表注入到您的变量中。因此，请自行决定使用它。

【讨论】：