angular – PrimeNG TreeTable为空
为了在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 [] (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |