Angular：PrimeNG 组织结构图未正确呈现图表

Question

我已经根据我的要求通过 PrimeNG 实现了组织结构图。我来自 TreeNode 类型数组的数据在 UI 中正确呈现，但设计不是。 下面是我的代码：

app.module.ts

import {OrganizationChartModule} from 'primeng/organizationchart';
imports: [ OrganizationChartModule ]

thankyou.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ApplicationService } from '../service-application/application.service';
import {TreeNode} from 'primeng/api';

@Component({
  selector: 'app-thankyou',
  templateUrl: './thankyou.component.html',
  styleUrls: ['./thankyou.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class ThankyouComponent implements OnInit {

  totObtainedMarks: number = 0;
  totTotalMarks: number = 0;
  marks: TreeNode[];
  constructor(public appService: ApplicationService) {}

  ngOnInit() {
    let result = [];
    for(let i of this.appService.result) {
      let mark: any;
      this.totObtainedMarks += i.obtainedMarks;
      this.totTotalMarks += i.totalMarks;
      mark = {
        label: i.questionCategory + ': ' + i.obtainedMarks.toString() + '/' + this.totTotalMarks.toString()
      };
      result.push(mark);
    }
    this.marks = [{
      label: 'Total: ' + this.totObtainedMarks.toString() + '/' + this.totTotalMarks.toString(),
      children: result
    }];
  }
}

thankyou.component.html

<p-organizationChart [value]="marks"></p-organizationChart>

我得到的观点：

我按照官方文档创建了这个，但仍然无法理解问题所在。 请帮帮我。

Answer 1

当我在 StackBlitz 上查看来自 PrimeNG 的组织结构图的最基本示例并查看 angular.json 时，需要添加一些样式参考才能使其正常工作。

StackBlitz example 无样式

你可以清楚地看到，有些地方不对，它看起来和你的问题一模一样。

具有样式的 StackBlitz 示例 angular.json

在 angular.json 文件中添加（或不注释掉）这些 CSS 引用行时，正确的样式将应用于您的组织结构图。

"styles": [
    "src/styles.css",
    "node_modules/primeng/resources/themes/nova-light/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "node_modules/primeicons/primeicons.css"
],

有关工作示例，请参阅 this updated StackBlitz，包括应用的正确样式和浏览器输出中的良好层次结构。

入门指南

进一步挖掘时，'Get Started' guide of PrimeNG 中甚至提到了它。

Dependencies Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require PrimeIcons for icons.

The css dependencies are as follows, Prime Icons, theme of your choice and structural css of components.

在这里，您可以选择通过 HTML 引用或通过 Angular CLI（就像我们在上面所做的那样）来包含样式：

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],