PrimeNG TreeTable Empty

Question

In an attempt to use PrimeNG in an Angular 4.1 project I am having some issues.

Here is the documentation I was following: https://www.primefaces.org/primeng/#/treetable

I'm testing the TreeTable feature but the output that is in the UI is empty. It displays the cells with no content and the have class="undefined".

app.component.html:

<p-treeTable *ngIf="treeNode" [value]="treeNode">
  <p-column field="id" header="ID"></p-column>
  <p-column field="label" header="Label"></p-column>
</p-treeTable>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TreeTableModule, SharedModule } from 'primeng/primeng';

import { AppComponent } from './app.component';
import { CustomerTypeService } from '../app-configure/service/app.customer.type.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    HttpModule,
    BrowserAnimationsModule,
    TreeTableModule,
    SharedModule
  ],
  providers: [CustomerTypeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

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

import { CustomerTypeService } from '../app-configure/service/app.customer.type.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: []
})
export class AppComponent implements OnInit {
  treeNode: TreeNode[];

  constructor(private customerTypesService: CustomerTypeService) {}

  ngOnInit(): void {
    this.customerTypesService.getCustomerTypes()
        .then(treeNode => {
          this.treeNode = treeNode;
          console.log(this.treeNode);
        });
  }
}

Here is the JSON string that I'm getting back from the HTTP request: [{"id":1,"label":"Account","parentId":null,"parentLabel":null},{"id":2,"label":"Bank Account","parentId":1,"parentLabel":"Account"},{"id":3,"label":"Test","parentId":null,"parentLabel":null}]

app.customertype.service.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

import {DefaultConfiguration} from '../../app/app.defaults';
import {CustomerType} from '../model/customer.type';
import {TreeNode} from 'primeng/primeng';

@Injectable()
export class CustomerTypeService {
    constructor(private http: Http) {}

    /**
     * Returns an array of all Customer Types.
     * @returns {Promise<CustomerType[]>}
     */
    getCustomerTypes(): Promise<TreeNode[]> {
        return this.http
            .get(`${DefaultConfiguration.BASE_API_URL}/CustomerTypes/`, DefaultConfiguration.getHeaders())
            .toPromise()
            .then(response => <TreeNode[]> response.json())
            .catch(DefaultConfiguration.handleError);
    }
}

can you upgrade your question with the answer, please? – Rildo Gomez Nov 12 '17 at 09:55 — Rildo Gomez, Nov 12 '17 at 09:55

alehn96 · Answer 1 · 2017-06-23T18:20:04.727

1

Add *ngIf="treeNode" in

<p-treeTable [value]="treeNode" *ngIf="treeNode">...</p-treeTable>

The object TreeNode implement this interface

export interface TreeNode {
 label?: string;
 data?: any;
 icon?: any;
 expandedIcon?: any;
 collapsedIcon?: any;
 children?: TreeNode[];
 leaf?: boolean;
 expanded?: boolean;
 type?: string;
 parent?: TreeNode;
 partialSelected?: boolean;
 styleClass?: string;
 draggable?: boolean;
 droppable?: boolean;
 selectable?: boolean;
}

you web service is returning a array of element that not implements interface TreeNode, it does not have property id.

This array

[{"id":1,"label":"Account","parentId":null,"parentLabel":null},{"id":2,"label":"Bank Account","parentId":1,"parentLabel":"Account"},{"id":3,"label":"Test","parentId":null,"parentLabel":null}]

not is TreeNode[]

edited Jun 23 '17 at 18:20

answered Jun 23 '17 at 14:41

alehn96

1,363
1
13
23

That seems to have made no difference outside of the table all popping in together. Originally, it was loading the header row first and the content was popping in once the promise responded. – nbrink Jun 23 '17 at 15:04
you can move the service CustomerTypeService from the component to module put in @NgModule.providers – alehn96 Jun 23 '17 at 15:12
I moved it into the ngModules provided and I still had no success. I updated the origin post with the changes. – nbrink Jun 23 '17 at 15:27
the service work fine?, you can use subscribe this.customerTypesService.getCustomerTypes().subscribe((data)=>{this.treeNode=data}); – alehn96 Jun 23 '17 at 15:30
I think the service is OK. I'm getting the response I expected. I added it to the original post if you would like to take a look. – nbrink Jun 23 '17 at 15:40
I see you made an addition to your original post. According to their documentation, I would expect this data to be a treenode and to be able to reference the field. https://www.primefaces.org/primeng/#/treetable – nbrink Jun 23 '17 at 15:51
I was able to get this working by doing what you suggested. I implemented the TreeNode interface. Thanks for your help! – nbrink Jun 23 '17 at 17:59
@nbrink how were you able to solve this? even i m stuck here.did you change the TreeNode interface ? any chahnges in the html – Irfan Syed May 10 '18 at 14:59

PrimeNG TreeTable Empty

1 Answers1