0

各位开发者好，

我正在使用 angular slickgrid 库，并尝试添加提供的 rowDetailView 功能。

我的问题是我可以单击以扩展视图，但无法关闭视图。一旦我再次单击该符号以关闭/打开 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>

我似乎无法弄清楚我是否遗漏了某些东西或者是否有其他问题。

谢谢大家。

4

1 回答 1

0

你好，好吧，所以我明白了：

当您使用 angularslickgrid 并添加 gridoptions 以及添加 rowDetailView 时的所有选项时，要求之一是具有返回新承诺的 process 方法。我无法真正弄清楚，但后来我避开了演示，并看到他在演示中解决的新承诺与传递给方法（simulateServerAsyncCall()）的参数相同，该参数在我的过程中触发。

因此，对于未来的读者，如果您遇到同样的问题，请注意 @ghiscoding 所说的：将您的组件添加到 app.module.ts 中的两个 declarations and entryComponents数组中。在您的 angular-slickgrid 位于 gridOptions 下的组件中：

`

enableRowDetailView: true, rowDetailView":{ .... .... process:(item) => this.yourMethod(item) //解决一个新的承诺 }

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);
    });
  }

`

这对我有用，让我的 angular-slickgrid rowDetailView 工作得很好

于 2020-06-18T07:30:40.890 回答