Question

我正在尝试从PrimeNG实施组织结构图。我设法复制/粘贴了基本图表。但是我想用高级的。因此，我检查了“源”部分。

我做了什么： 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

今天的课程：

使用检查，查看是否有任何错误消息。我必须从@ angular / animations安装并导入BrowserAnimationsModule
为解决其他错误消息，我发现围绕基本的Angular语法。幸运的是，我在午餐前观看了有关Angular语法的速成班视频，因此经过15分钟的深入搜索，我发现了这个问题，为什么js崩溃了。如您所见，PrimeNG不会自动写出两个括号“ {{” ＆“}}” 。添加这些之后，我的问题就解决了，我又回到了编程地牢的黑暗中。

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

PrimeNG-组织结构图

1 个答案: