Angular PrimeNg TreeNode:将类转换为TreeNode，无法读取未定义的属性映射 [英] Angular PrimeNg TreeNode : convert class into TreeNode, cannot read property map of undefined

问题描述

我正在处理由JHipster生成并使用Angular 4.3的应用程序. 我正在尝试使用 PrimeNG的树组件

I'm working on an application generated by JHipster and using Angular 4.3. I'm trying to use the tree component of PrimeNG

我试图将对象数组转换为TreeNode数组，以便像树一样显示.

I'm trying to convert an array of objects into an array of TreeNode, in order to be displayed like a tree.

我的打字稿模型如下:

export class Continent implements BaseEntity {
    constructor(
        public id?: number,
        public name?: string,
        public countries?: Country[]
) { }

我已遵循本主题，其中介绍了如何进行转换接口(但在我的情况下，我有类)和那些功能(有错误的地方):

I've followed this subject which describes how to convert interfaces (but in my case I have classes) and I've thoses functions (where there is the error):

private continentsToTreeNodes(continents: Continent[]) {
    for (let cont of continents) {
        this.continentsNodes.push(this.continentToTreeNode(cont));
    }
}

private continentToTreeNode(cont: Continent): TreeNode {
    return {
        label: cont.name,
        data: cont,
        children: cont.countries.map(this.continentToTreeNode) // error at this line : cannot read property map of undefined
    };
}

这些函数在我的组件初始化时执行:

Those functions are executed at the initialization of my component :

export class MyComponent implements OnInit {

continents: Continent[];
continentsNodes: TreeNode[] = [];

    ngOnInit() {
        this.loadAll();
    }

    loadAll() {
        this.continentService.query().subscribe(
            (res: ResponseWrapper) => {
                this.continents = res.json;
                this.continentsToTreeNodes(this.continents);
            },
            (res: ResponseWrapper) => this.onError(res.json)
        );
    }

}

我的JSON如下所示:

My JSON looks like this :

[{
"id": 1,
"name": "Africa",
"countries": [{
        "id": 8,
        "name": "Cameroon",
        "continentId": 1
        }, {
        ... // other countries
],{
// other continents
...

有人知道为什么我的国家/地区会收到此错误消息吗?

Does anyone know why I have this error message with my countries ?

我已经将日志放在continentToToNode中，可以看到这是递归函数的问题. 在第一个循环中，我拥有第一个大陆的所有国家/地区，在第二个循环中它崩溃了，属性cont.countries未定义.

EDIT : I've put logs in continentToTreeNode, and I can see that it's the recursive function the problem. At the first loop I have all the countries of the first Continent, and it crashed at the second loop, the attribute cont.countries is undefined.

这怎么可能，我该如何解决?在我的JSON中，我拥有每个大洲的所有国家/地区...

How is it possible and how can I fix it ? In my JSON I have all the countries of each continent...

推荐答案

我已经解决了(愚蠢的)问题，我在需要大陆的函数上进行了迭代，并且试图转换国家.可以使用其他功能来改变国家/地区:

I've solved my (stupid) problem, I was iterating on an function which requires continents, and I was trying to convert countries. It's ok with another functions which transform the countries :

private continentsToTreeNodes(continents: Continent[]) {
    for (let cont of continents) {
        this.continentsNodes.push(this.continentToTreeNode(cont));
    }
}

private continentToTreeNode(cont: Continent): TreeNode {
    let countiesTreeNodes: TreeNode[] = [];

    if (cont.countries !== undefined) {
        for (let c of cont.countries) {
            countriesTreeNodes.push(this.paysToTreeNode(c));
        }
    }
    return {
        label: cont.nom,
        data: cont,
        children: countriesTreeNodes
    };
}

private countryToTreeNode(country: Country) : TreeNode {
    return {
        label: country.nom,
        data: country
    }
}

这篇关于Angular PrimeNg TreeNode:将类转换为TreeNode，无法读取未定义的属性映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！