ag-Grid: не удалось найти подходящую модель строки для rowModelType clientSide - PullRequest
Новая
       17

ag-Grid: не удалось найти подходящую модель строки для rowModelType clientSide

0 голосов
/ 25 февраля 2020

Я пытаюсь воссоздать этот пример в документах ag-grid: https://www.ag-grid.com/javascript-grid-master-detail/

, и я получаю эту ошибку, которую я не знаю почему. Все остальное работает нормально: 

ag-Grid: could not find matching row model for rowModelType clientSide
ag-Grid: Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '@ag-grid-community/client-side-row-model';

А вот точный код в моем компоненте: 

import { HttpClient } from "@angular/common/http";
import { AllModules } from "@ag-grid-enterprise/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [modules]="modules"
      [columnDefs]="columnDefs"
      [masterDetail]="true"
      [detailCellRendererParams]="detailCellRendererParams"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class TopsheetComponent {
  private gridApi;
  private gridColumnApi;
  public modules  = AllModules;

  private columnDefs;
  private detailCellRendererParams;
  private rowData;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "name",
        cellRenderer: "agGroupCellRenderer"
      },
      { field: "account" },
      { field: "calls" },
      {
        field: "minutes",
        valueFormatter: "x.toLocaleString() + 'm'"
      }
    ];
    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          { field: "callId" },
          { field: "direction" },
          { field: "number" },
          {
            field: "duration",
            valueFormatter: "x.toLocaleString() + 's'"
          },
          { field: "switchCode" }
        ],
        onFirstDataRendered: function(params) {
          params.api.sizeColumnsToFit();
        }
      },
      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
      },
      template: function(params) {
        var personName = params.data.name;
        return (
          '<div style="height: 100%; background-color: #EDF6FF; padding: 20px; box-sizing: border-box;">' +
          '  <div style="height: 10%;">Name: ' +
          personName +
          "</div>" +
          '  <div ref="eDetailGrid" style="height: 90%;"></div>' +
          "</div>"
        );
      }
    };
  }

  onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
    setTimeout(function() {
      params.api.getDisplayedRowAtIndex(1).setExpanded(true);
    }, 0);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid-docs/latest/src/javascript-grid-master-detail/template-callback-customisation/data/data.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

Он в значительной степени идентичен примеру в документации.

Вот зависимости в моем package.json

"dependencies": {
    "@ag-grid-enterprise/all-modules": "^22.1.2",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "ag-grid-enterprise": "^22.1.1",
}

Без всех этих зависимостей я сталкиваюсь с проблемами. Есть что-то, чего я здесь не хватает? Я все правильно добавил в свой app.module.ts: 

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
    imports: [
       AgGridModule.withComponents([])
    ]
})

^ Это было сокращено, чтобы было легче читать. Но я что-то упускаю здесь очевидное?

1 Ответ

2 голосов
/ 26 февраля 2020

Я прошу прощения за это, но я создал StackBlitz, и глупость не позволила мне раскошелиться. Это не полный ответ, но я привожу его здесь, потому что это слишком долго для комментария.

Как и вы, я тоже сходил с ума, и ничего не получалось. Я получал ту же ошибку, что и вы, и когда я изменил ее на ClientSideRowModelModule, я получил предупреждение, что не могу использовать MasterDetail, потому что он не импортирован.

Попробуйте предоставить модули в глобальном масштабе, как описано здесь (https://www.ag-grid.com/javascript-grid-modules/) в main.ts. Если я правильно помню, я импортировал ModuleRegistry из @ag-grid-community/all-modules (у @ag-grid-enterprise/all-modules его не было, как они показывают в документации), импортировал AllModules из @ag-grid-enterprise/all-modules и затем сделал ModuleRegistry.registerModules(AllModules); прямо перед platformBrowserDynamic().bootstrapModule , Это убрало ошибки и предупреждения (только ошибка / предупреждение не предоставления лицензионного ключа). На мой взгляд, эта тема была отключена, но, может быть, это легко исправить.

IMO, это плохая документация / реализация из ag-grid, кажется, повсеместно. Например, если вы не можете скопировать и вставить их демонстрационное решение и чтобы оно не работало, очень плохо, если вы спросите меня.

...