angular - getOrgChart 库（版本 - 2.5.3）中面临问题，字段存在于数据源中，但在渲染节点函数 args.node.data 中缺失

Question

我正在为我的项目使用 getOrgChart 库（版本 2.5.3），我面临的问题是数据源正在获取正确的数据，但是当调用 renderNod 函数来修改节点时，我没有得到一个字段（ objectiveName) ，有人可以指导我为什么我会遇到这个问题。

这是我的代码及其调用方式-

在 ngOninit 方法中，调用了以下函数，data 包含一个包含各种字段的目标列表，initMapCustomTheme 方法通过创建一个新的 getOrgChart 实例来创建自定义主题，initMap 对其进行初始化，并修改现有的字段

这是 convertDataToMapFormat 方法：

convertDataToMapFormat(mapData: any) {
    this.objectivesList = new Array<any>();
    var alignedObjectives = mapData;
    console.log("before for loop ", alignedObjectives);

    if (alignedObjectives.length > 0) {
        alignedObjectives.forEach(objective => {
            this.objectivesList.push(this.BuildNodes(objective));
        });
    }

    while (alignedObjectives.length > 0) {
        var localObjectives = new Array<any>();
        alignedObjectives.forEach(objective => {
            if (objective.childObjectives !== undefined && objective.childObjectives.length > 0) {
                objective.childObjectives.forEach(childObjective => {
                    localObjectives.push(childObjective);
                });
            }
        });
        alignedObjectives = localObjectives;
        alignedObjectives.forEach(objective => {
            objective.ownerProfileImageUrl = this.getStorageProfileUrl(objective.ownerProfileImageUrl);
            this.objectivesList.push(this.BuildNodes(objective));
        });
    }
    console.log("in convert to map method ", this.objectivesList);
}

此方法基本上提取所有目标并将从 BuildNodes 方法创建的节点存储在 objectsList 中，

下图是 BuildNodes 方法（字段基本上是目标字段的一部分，需要注意的是我将 data.name 分配给了 objectiveName ）

以下代码用于 initCustomTheme 方法

initMapCustomTheme() {
    this.mapOrientation = getOrgChart.RO_TOP;     // initializing vertical orientation by default;
    getOrgChart.themes.customTheme = {
        size: [525, 200],
        toolbarHeight: 0,
        textPoints: [
            { x: 25, y: 160, width: 400 },
        ],
        textPointsNoImage: [
            { x: 25, y: 160, width: 400 },
        ],
        expandCollapseBtnRadius: 20,
        box: '<rect x="0" y="0" height="290" width="540" rx="3" ry="3" class="org-tree-card"/>',
        objectiveName: '<text width="50" x="100" y="50" class="text-large text-truncate-1 font-weight-600" >[objectiveName]</text>',
    };
}

这是方法initMap

initMap() {
    this.orgChart = new getOrgChart(document.getElementById('org-tree'), {
        theme: 'customTheme',
        primaryFields: ['objectiveName', 'ownerName', 'groupName', 'targetValue', 'progress', 'currentValue', 'initialValue','status'],
        photoFields: ['profileImageUrl'],
        enableEdit: false,
        enableDetailsView: false,
        renderNodeEvent: renderNodHandler,
        orientation: this.mapOrientation,
        dataSource: this.objectivesList,
        levelSeparation: 150,
        siblingSeparation: 60,
        expandToLevel: 200,
        boxSizeInPercentage: { minBoxSize: { width: 1, height: 1 }, boxSize: { width: 25, height: 25 }, maxBoxSize: { width: 40, height: 40 } },
    });

    function renderNodHandler(sender, args) {
        //console.log("sender and args are ", sender, args);
        for (let i = 0; i < args.content.length; i++) {
            if (args.content[i].indexOf('[objectiveName]') !== -1) {
                args.content[i] = args.node.data.objectiveName ? args.content[i].replace('[objectiveName]', args.node.data.objectiveName) : args.content[i].replace('[objectiveName]', 'Not Available');
            }
            if (args.content[i].indexOf('[ownerName]') !== -1) {
                args.content[i] = args.node.data.ownerName ? args.content[i].replace('[ownerName]', args.node.data.ownerName) : args.content[i].replace('[ownerName]', 'Not Available');
            }
            if (args.content[i].indexOf('[groupName]') !== -1) {
                args.content[i] = args.node.data.department ? args.content[i].replace('[groupName]', args.node.data.groupName) : args.content[i].replace('[groupName]', 'Not Available');
            }
        }
        console.log("sender and args are ", sender, args);
    }
}

在 sender 和 args 中，当我检查时 - args.node.data 中没有“objectiveName”字段（据我了解，它是从数据源分配的），我需要该字段，因为它是我的代码，

以前，当我将其命名为“名称”时，当时还缺少另一个字段（所有者名称）。

Chrome 开发工具数据：

这就是 convertDataToMap ，你可以在这里看到它包含对象中的objectiveName。

下面是该renderNod函数断点将命中的断点，我希望您可以看到右侧打开了args，在数据字段中-它没有任何名为“onjectiveName”的字段，因此该卡没有得到正确的数据。

（已经删除了不必要的代码和注释代码，因为它很长，但结果仍然相同，所以请忽略您在左侧看到的额外代码。）

请帮助我，是否有任何可用于此版本的文档，因为我无法在任何地方找到它

标签： angularsvgorgchartgetorgchart