为了在Angular 4.1项目中使用PrimeNG,我遇到了一些问题.
这是我关注的文档:https://www.primefaces.org/primeng/#/treetable
我正在测试TreeTable功能,但UI中的输出是空的.它显示没有内容的单元格,并且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); }); } }
这是我从HTTP请求中获取的JSON字符串:[{“id”:1,“label”:“Account”,“parentId”:null,“parentLabel”:null},{“id”: 2,“label”:“Bank Account”,“parentId”:1,“parentLabel”:“Account”},{“id”:3,“label”:“Test”,“parentLabel” :空值}]
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); } }
解决方法
添加* ngIf =“treeNode”
<p-treeTable [value]="treeNode" *ngIf="treeNode">...</p-treeTable>
对象TreeNode实现此接口
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; }
你的Web服务返回一个没有实现接口TreeNode的元素数组,它没有属性id.
这个数组
[{"id":1,"label":"Account","parentId":null,"parentLabel":null},{"id":2,"label":"Bank Account","parentId":1,"parentLabel":"Account"},{"id":3,"label":"Test","parentLabel":null}]
不是TreeNode []