PivotGrid 及其选择器未 binding/working 正确

Question

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

关于我的申请的简要说明：-

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

在父组件Workbook中有下拉，"OnChange"当下拉值改变时触发事件，它会触发PivotGrid中的ngOnChanges事件，因为它的Input()参数值正在改变。
在 ngOnChanges 事件期间的 PivotGrid 中，它调用绑定网格的本地方法 LoadInfraPivotGrid()。绑定网格后，我更改了滑出组件的 Input() 参数值，这将再次触发滑出组件中的 ngOnChanges 事件。
在 ngOnChanges 事件期间的滑出中它绑定了选择器组件。
用于绑定选择器组件的数据是使用保存数据的@Injectable 组件 SessionService 从父 PivotGrid 传递的。从这个 SessionService 中读取值，然后与选择器绑定。

我在这里面临的问题是 bound/loaded 与 PivotGrid/Selector 的数据不正确。结果是每当我尝试更改选择器中的 Measures/Dimensions 时，PivotGrid 都会崩溃并显示以下错误消息。当我在选择器控件中连续尝试 change/modify 时，就会出现此问题。

    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

中查找示例源

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

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

请从下拉菜单中打开 "Report3"，Report3 会加载
将 "Vendor" 从 "Item Scorecard" 拖放到列（请参考快照）
将 "Retailer" 拖放到 "Rows" 网格在此之后立即崩溃。

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

或者进入 class 的构造函数：

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

PivotGrid 及其选择器未 binding/working 正确

PivotGrid and its selector not binding/working properly

angular

infragistics

ignite-ui

pivot-grid