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

Question

我开发了一个应用程序，使用Angular2，IgniteUI/Infragistics PivotGrid控件加载数据透视表。我们正在动态传递Cubes信息（即度量/维度）并将Json数据与PivotGrid绑定。我们使用由IgniteUI/Infragistics在其github演示中给出的Angular2包装组件。

一个breif交代在这里我的应用程序： -

工作簿是具有下拉父组件。下拉的Onchange事件将触发PivotGrid组件，它是Workbook组件的子组件，用于加载和绑定PivotGrid。在PivotGrid网格被绑定/加载之后，它应该加载PivotGrid的选择器。这个选择器被放置在这个PivotGrid下的一个叫做slideout的子组件中。基本上，每当下拉列表发生变化时，它应该分别加载相应的PivotGrid及其选择器组件。

1. 在工作簿是在父组件具有下拉菜单中，“的OnChange”当下拉值的变化，它会触发在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. 请从下拉菜单中，报告3被载入
2. 从“项目记分卡”拖放的“供应商”分列打开“报告3”（请参阅​​快照）
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"; 
    }