Angular -slickgrid не может прочитать свойство hostView из undefined

Question

Доброго времени суток, товарищи-разработчики,

Я использую библиотеку 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)"

вот мой gridOptions:

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

Вот simulateServerAsyncCall () Метод, который я использую:

  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 и добавляете свои параметры сетки и все те, когда вы добавляете rowDetailView, одно из требований - иметь метод процесса, который возвращает новый обещание. Я не мог этого понять, но затем я уклонился от демонстрации и увидел, что новое обещание, которое он разрешает в демонстрации, - это тот же параметр, переданный методу (simulateServerAsyncCall()), который запускается в моем процессе.

Итак, будущим читателям, если у вас возникнет такая же проблема, обратите внимание на то, что сказал @ghiscoding: добавьте свой компонент в оба массива declarations and entryComponents в вашем app.module.ts. в вашем компоненте, где ваша 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 работает отлично