PrimeNG - 组织结构图

Question

我正在尝试从PrimeNG 实施组织结构图。我设法复制/粘贴了基本图表。但我想使用高级的。所以我查看了 Source 部分。

我做了什么： 1) 将高级案例的相关 HTML 部分复制到我的 Angular 组件中的 HTML 支架中 2）将“样式”添加到我的“app.component.ts”中。我注释掉了标准变量：“styleUrls” 3) 复制到类的相关数据中

它只是显示一个空白页。我试图缩小问题范围，它似乎源于 HTML 代码中的部分：

因为当我将其注释掉时，我得到了树，但没有来自 PrimeNG 的大部分预期部分，值得注意的是，这些部分也奇怪地没有正确扩展：

有人知道为什么它不适合我吗？这是我在 app.component.ts 部分的完整代码：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { TreeNode, Message } from 'primeng/api';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // styleUrls: ['./app.component.css'],
  styles: [`
  .company.ui-organizationchart .ui-organizationchart-node-content.ui-person {
      padding: 0;
      border: 0 none;
  }

  .node-header,.node-content {
      padding: .5em .7em;
  }

  .node-header {
      background-color: #495ebb;
      color: #ffffff;
  }

  .node-content {
      text-align: center;
      border: 1px solid #495ebb;
  }

  .node-content img {
      border-radius: 50%;
  }

  .department-cfo {
      background-color: #7247bc;
      color: #ffffff;
  }

  .department-coo {
      background-color: #a534b6;
      color: #ffffff;
  }

  .department-cto {
      background-color: #e9286f;
      color: #ffffff;
  }

  .ui-person .ui-node-toggler {
      color: #495ebb !important;
  }

  .department-cto .ui-node-toggler {
      color: #8a0a39 !important;
  }
`],
encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit{
  title = 'app';
  data: TreeNode[];

  selectedNode: TreeNode;

  messages: Message[];

  ngOnInit() {
      this.data = [{
          label: 'CEO',
          type: 'person',
          styleClass: 'ui-person',
          expanded: true,
          data: {name:'Walter White', 'avatar': 'walter.jpg'},
          children: [
              {
                  label: 'CFO',
                  type: 'person',
                  styleClass: 'ui-person',
                  expanded: true,
                  data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
                  children:[{
                      label: 'Tax',
                      styleClass: 'department-cfo'
                  },
                  {
                      label: 'Legal',
                      styleClass: 'department-cfo'
                  }],
              },
              {
                  label: 'COO',
                  type: 'person',
                  styleClass: 'ui-person',
                  expanded: true,
                  data: {name:'Mike E.', 'avatar': 'mike.jpg'},
                  children:[{
                      label: 'Operations',
                      styleClass: 'department-coo'
                  }]
              },
              {
                  label: 'CTO',
                  type: 'person',
                  styleClass: 'ui-person',
                  expanded: true,
                  data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
                  children:[{
                      label: 'Development',
                      styleClass: 'department-cto',
                      expanded: true,
                      children:[{
                          label: 'Analysis',
                          styleClass: 'department-cto'
                      },
                      {
                          label: 'Front End',
                          styleClass: 'department-cto'
                      },
                      {
                          label: 'Back End',
                          styleClass: 'department-cto'
                      }]
                  },
                  {
                      label: 'QA',
                      styleClass: 'department-cto'
                  },
                  {
                      label: 'R&D',
                      styleClass: 'department-cto'
                  }]
              }
          ]
      }];
  }

  onNodeSelect(event) {
      this.messages = [{severity: 'success', summary: 'Node Selected', detail: event.node.label}];
  }
}

这是来自HTML：

<p-organizationChart [value]="data" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)"styleClass="company">
  <ng-template let-node pTemplate="person">
    <div class="node-header ui-corner-top">{node.label}</div>
    <div class="node-content">
        <img src="./src/app/{node.data.avatar}" width="32">
        <div>{node.data.name}</div>
    </div>
</ng-template>
<ng-template let-node pTemplate="department">
  {node.label}
</ng-template>

</p-organizationChart>

提前致谢！

Answer 1

今天的课：

1. 使用检查并查看是否有任何错误消息。我必须从 @angular/animations 安装和导入 BrowserAnimationsModule

2. 为了解决我发现的围绕基本 Angular 语法的其他错误消息。幸运的是，我在午饭前观看了一个关于 Angular 语法的速成课程视频，所以经过 15 分钟的密集搜索后，我发现了为什么 js 在 HTML 中崩溃的问题。如您所见，PrimeNG 不会自动写出两个括号 "{{" & "}}"。添加这些之后，我的问题就解决了，我又回到了我的编程地牢的黑暗中。

希望对有类似问题的初学者有所帮助！