Angular 素数树可空

在尝试在Angular 4.1项目中使用Priming时，我遇到了一些问题

以下是我所遵循的文档：

我正在测试TreeTable特性，但是UI中的输出是空的。它显示没有内容的单元格，并显示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.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”，“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);
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
导入“rxjs/add/operator/toPromise”；
从“../../app/app.defaults”导入{DefaultConfiguration}；
从“../model/customer.type”导入{CustomerType}；
从'priming/priming'导入{TreeNode}；
@可注射（）
导出类CustomerTypeService{
构造函数（私有http:http）{}
/**
*返回所有客户类型的数组。
*@returns{Promise}
*/
getCustomerTypes（）：承诺{
返回此文件。http
.get（`${DefaultConfiguration.BASE\u API\u URL}/CustomerTypes/`，DefaultConfiguration.getHeaders（））
.toPromise（）
.then（response=>response.json（））
.catch（DefaultConfiguration.handleError）；
}
}

在中添加*ngIf=“treeNode”

您的web服务正在返回未实现接口树节点的元素数组，它没有属性id

这个数组

[{"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}]

---

TreeNode[]

似乎在表外并没有什么不同，但它们一起出现了。最初，它首先加载标题行，一旦承诺响应，内容就会弹出。您可以将服务CustomerTypeService从组件移动到放入@NgModule.provider的模块。我将其移动到提供的ngModules中，但仍然没有成功。我用更改更新了原始帖子。服务是否正常？您可以使用subscribe this.customerTypesService.getCustomerTypes（）.subscribe（（数据）=>{this.treeNode=data}）；我觉得服务还可以。我得到了我期望的回应。如果你想看的话，我把它添加到了原来的帖子里。你能用答案升级你的问题吗？

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

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;
}

[{"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}]