角度光滑网格无法读取未定义的属性"hostView"

Question

各位开发者，大家好，

我正在使用角度光滑网格库，并且尝试添加提供的rowDetailView功能。

我的问题是我可以单击以显示视图，但无法关闭视图。 一旦我再次单击该符号以关闭/打开行详细信息视图，我就会收到以下错误：

ERROR
core.js:15723
TypeError: Cannot read property 'hostView' of undefined
core.js:15723
message:"Cannot read property 'hostView' of undefined"
stack:"TypeError: Cannot read property 'hostView' of undefined
at RowDetailViewExtension.push../node_modules/angular-slickgrid/fesm5/angular-slickgrid.js.RowDetailViewExtension.onBeforeRowDetailToggle (http://localhost:4200/vendor.js:169190:48)
at RowDetailView.<anonymous> (http://localhost:4200/vendor.js:169026:27)
at Event.notify (http://localhost:4200/vendor.js:357049:35)
at SlickGrid.handleClick (http://localhost:4200/vendor.js:355962:39)
at Event.notify (http://localhost:4200/vendor.js:357049:35)
at trigger (http://localhost:4200/vendor.js:361492:18)
at HTMLDivElement.handleClick (http://localhost:4200/vendor.js:363417:7)
at HTMLDivElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js:2:42347)
at HTMLDivElement.push../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js.$event.dispatch (http://localhost:4200/vendor.js:351849:30)
at HTMLDivElement.v.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js:2:40348)"

这是我的网格选项：

this.gridOptions = {
enableAutoResize: true,
enableSorting: true,
enableColumnReorder: false,
enableFiltering: true,
enablePagination: true,
enableAsyncPostRender: true,
asyncPostRenderDelay: 0,
rowHeight: 50,
enableCellMenu: true,
rowSelectionOptions: {
selectActiveRow: true,
},
enableRowDetailView: true,
datasetIdPropertyName: 'id',
rowDetailView: {
process: (item) => this.simulateServerAsyncCall(item),
loadOnce: true,
singleRowExpand: true,
useRowClick: false,
panelRows: this.detailViewRowCount,
preloadComponent: LoaderComponentComponent,
parent: this,
viewComponent: RowDetailViewComponent,
},
params: {
angularUtilService: this.angularUtilService,
}
};

这是我使用的模拟服务器AsyncCall((方法：

simulateServerAsyncCall(item: any) {
console.log('this is the item passed to the stimFunc: ' + JSON.stringify(item));
return new Promise((resolve) => {
if (this.businessClients === undefined) {
console.log('this company has no sites');
this.rowView.siteDataToPass = null;
} else {
console.log('its seems there might be a sight hiding somewhere');
this.rowView.siteDataToPass = this.businessClients[item.tenantId].sites;
}
resolve(this.businessClients);
});
}

如果需要我的前端，它在这里：

<div id="companiesGrid" class="col" style="margin-top:15px">
<angular-slickgrid appSlickgridTour gridId="compGridList" [columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
</div>

我似乎无法弄清楚我是否错过了什么，或者是否有其他问题。

谢谢大家。

Answer 1

你好，好的，所以我弄清楚了：

当您使用 AngularslickGrid 并添加 GridOptions 以及添加 rowDetailView 时的所有这些选项时，其中一个要求是具有返回新承诺的 Process 方法。我真的无法弄清楚，但后来我躲避了演示，看到他在演示中解决的新承诺与传递给在我的进程中触发的方法(simulateServerAsyncCall()(的参数相同。

因此，对于未来的读者，如果您有同样的问题，请注意@ghiscoding所说的内容： 将组件添加到 app.module.ts 中的两个declarations and entryComponents数组中。 在网格下方的角度光滑网格的组件选项：

'

enableRowDetailView： true， rowDetailView"：{ .... .... 进程：(项( => this.your方法(项(//解析新承诺 }

that method should return the same item that was passed to that method as the new promise :

yourMethod(item: any) {
return new Promise((resolve) => {
resolve(item);
});
}

'

这就是对我有用的方法，让我的角度光滑网格行详细视图完美运行