PrimeNG 树组件

Question

我应该做一棵Primeng树。这是我的模型。

export interface Profiles {
  active?: true,
  description?: string,
  function?: [
    string
  ],
  id?: number,
  macroFunction?: string,
  name?: string,
  nodeTree?: [
    {
      children?: [
        string
      ],
      data?: {
        description?: string,
        flag?: true,
        functionFK?: string,
        id?: number,
        order?: number,
        parent?: number
      }
    }
  ]
}

我不知道如何进行 http 调用和其他操作。

我想过类似的事情：服务：

 postProfiles(): Promise<Profiles > {
    const url = 'profiles/create';
    return this.http.post<Profiles >(url, {})
      .toPromise()
  }

ts --> http

node: Profile[];
selectedNode: Profile;
    ngOnInit() {
            this.nodeService.postProfiles().then(node=> this.selectedNode= node);
        }

HTML

<p-tree [value]="node" selectionMode="single" [(selection)]="selectedNode"></p-tree>

有人可以帮助我吗？怎么了？提前致谢！

完成！希望对你有用

node:any; 

this.ricercaService.getTree().subscribe( (res) => { 
this.node = res.nodeTree; 
}, 
(error) => { c
onsole.log(error); 
});

HTML –

<p-tree *ngIf="node" [value]="node" selectionMode="checkbox" [(selection)]="selectedNode"> <ng-template let-node pTemplate="default"> <b>{{ node.data.description }}</b> </ng-template> </p-tree> –

Answer 1

您的代码有 2 个问题：

您没有在组件 class 中设置 node 属性 ;
您的数据不符合要求的形状 defined by the PrimeNG tree component (属性 value) ;

这里有一些修正

服务：

// It's better to keep using Observable instead of Promise as it is more flexible and powerful
// and shareReplay() avoid requesting your server again if subscribed multiple times
postProfiles(): Observable<Profiles[]> {
    const url = 'profiles/create';
    return this.http.post<Profiles[]>(url, {}).pipe(shareReplay());
}

分量：

 // This is your profiles transformed into TreeNode from PrimeNG
 nodes$: Observable<TreeNode[]>;
 selectedNode: TreeNode;

 ngOnInit() {
     // Here we map each Profile into TreeNode
     this.nodes$ = this.nodeService.postProfiles().pipe(
         map(profiles => profiles.map(p => ({
             label: p.name,
             children: p?.nodeTree?.children.map(child => ({
                 label: child.label
             })
         })
     );
 }

模板 (HTML):

 <!-- The "| async" subscribe to this observable and use the value received -->
 <p-tree [value]="nodes | async" selectionMode="single" [(selection)]="selectedNode"></p-tree>

PrimeNG 树组件

PrimeNG tree component

angular

primeng

primeng-tree