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);
}
}
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[]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With