PivotGrid 及其选择器未绑定/正常工作

Question

我已经开发了一个带有 Angular2、IgniteUI/Infragistics PivotGrid 控件的应用程序来加载 PivotGrid。我们正在动态传递多维数据集信息，即度量/维度，并将 json 数据与 PivotGrid 绑定。我们正在使用 IgniteUI/Infragistics 在其 github 演示中提供的 Angular2 包装器组件。

这里是关于我的应用程序的简要说明：-

Workbook 是具有下拉菜单的父组件。下拉列表的 Onchange 事件将触发作为 Workbook 组件的子组件的 PivotGrid 组件来加载和绑定 PivotGrid。绑定/加载 PivotGrid 网格后，它应该加载 PivotGrid 的选择器。此选择器放置在此 PivotGrid 下的名为 slideout 的子组件中。基本上每当下拉菜单发生变化时，它应该分别加载适当的 PivotGrid 及其选择器组件。

1. 在父组件有下拉列表的 Workbook 中，当下拉列表值更改时触发“OnChange”事件，由于其 Input() 参数值正在更改，它将触发 PivotGrid 中的 ngOnChanges 事件。
2. 在 ngOnChanges 事件期间，在 PivotGrid 中，它调用绑定网格的本地方法 LoadInfraPivotGrid()。绑定网格后，我更改了滑出组件的 Input() 参数值，这应该再次触发滑出组件中的 ngOnChanges 事件。
3. 在 ngOnChanges 事件期间滑出时，它会绑定选择器组件。
4. 绑定选择器组件的数据是使用保存数据的@Injectable 组件SessionService 从父PivotGrid 传递的。从此 SessionService 读取值，然后与选择器绑定。

我在这里面临的问题是数据未与 PivotGrid/Selector 正确绑定/加载。结果是每当我尝试更改选择器中的度量/维度时，PivotGrid 都会崩溃并显示以下错误消息。当我不断尝试在选择器控件中更改/修改时，会出现此问题。

    Uncaught TypeError: Cannot read property 'top' of undefined
        at t.(anonymous function).(anonymous function)._positionOverlayDropAreas (http://localhost:3000/js/IgniteUI/infragistics.lob.js:662:19496)
        at t.(anonymous function).(anonymous function)._positionOverlayDropAreas (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function)._onDataRendered (http://localhost:3000/js/IgniteUI/infragistics.lob.js:662:18161)
        at t.(anonymous function).(anonymous function)._onDataRendered (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at HTMLTableElement.dataRendered (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:12953)
        at t.(anonymous function).(anonymous function)._trigger (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:10002)
        at t.(anonymous function).(anonymous function)._renderData (http://localhost:3000/js/IgniteUI/infragistics.lob.js:138:17643)
        at t.(anonymous function).(anonymous function)._renderData (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function).proxy (http://code.jquery.com/jquery-1.12.3.js:529:14)
        at Class._invokeCallback (http://localhost:3000/js/IgniteUI/infragistics.core.js:270:30197)

请在URL找到示例源

即使我在行中向下钻取报告，它也会崩溃。 任何想法我在这里做的错误是什么？有什么修复吗？

编辑： 现在我得到一个不同的错误，我提到的错误/异常可以在示例代码本身中重现。复制问题的步骤：-

1. 请从下拉列表中打开“Report3”，Report3 已加载
2. 将“供应商”从“项目记分卡”拖放到列（请参阅快照）
3. 将“零售商”拖放到“行” 网格在此之后立即崩溃。

    Uncaught TypeError: Cannot read property 'key' of undefined
        at t.(anonymous function).(anonymous function)._transformGridData (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:23266)
        at t.(anonymous function).(anonymous function)._transformGridData (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function)._configureOptions (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:12632)
        at t.(anonymous function).(anonymous function)._configureOptions (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function)._onGridUpdated (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:26768)
        at t.(anonymous function).(anonymous function)._onGridUpdated (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at Class.<anonymous> (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:9410)
        at Class.dispatch (http://code.jquery.com/jquery-1.12.3.js:5226:27)
        at Class.elemData.handle (http://code.jquery.com/jquery-1.12.3.js:4878:28)
        at Object.trigger (http://code.jquery.com/jquery-1.12.3.js:5130:12)

Answer 1

widgetId 属性应该在第一次创建透视网格时设置。 这应该在 InfraPivotGrid 组件中声明 gridId 属性时完成：

private gridId: string = "pivotGrid";

或者进入那个类的构造函数：

    constructor(private _SessionService: SessionService, private _WidgetConfigService: WidgetConfigService) {
        console.log("In constructor of InfraPivotGrid");
        this.gridId = "pivotGrid";
    }