PrimeNg 组织结构图以编程方式刷新

Question

我正在使用 p-organizationChart 来显示层次结构。我正在动态添加 child。添加child后，它不显示展开箭头，但是当我select任何节点时，它会反映出来。

所以，我想以编程方式刷新此 org-chart。

有什么建议吗？

 <p-organizationChart [value]="programStructure" styleClass="company" selectionMode="single" [(selection)]="selectedParentProgram" #chart [preserveSpace]="false">
</p-organizationChart>

添加Child:

addChildNode() {
    this.selectedParentProgram.children.push({
        label: this.selectedChildProgram.name,
        type: 'node',
        expanded: true,
        data: {
            'programId': this.selectedChildProgram.id,
            'versionId': this.selectedProgramVersion.id
        },
        children: []
    });
    this.isAddProgramDialogShown = false;
    this.clear();
  }

此代码按预期完美运行。但是，除非我 select/unselect 任何节点，否则图表不会更新。

解决方案对我有用

this.cd.detectChanges();

Answer 1

Angular 更改检测通常在对对象的引用发生更改时触发。使用它的 push 方法向数组添加元素不会更改数组的引用。相反，您可以尝试使用扩展语法重新分配变量。

尝试以下方法

addChildNode() {
  const child = {
    label: this.selectedChildProgram.name,
    type: 'node',
    expanded: true,
    data: {
      'programId': this.selectedChildProgram.id,
      'versionId': this.selectedProgramVersion.id
    },
    children: []
  };
  
  this.selectedParentProgram = {
    ...this.selectedChildProgram,
    children: [
      ...this.selectedChildProgram.children, 
      child
    ]
  };
  this.isAddProgramDialogShown = false;
  this.clear();
}

PrimeNg 组织结构图以编程方式刷新

PrimeNg Organization Chart refresh programmatically

orgchart

primeng

angular