ag-Grid：找不到 rowModelType 客户端的匹配行模型

Question

我正在尝试在 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([])
    ]
})

^ 已将其缩短以使其更易于阅读。但是我在这里遗漏了一些明显的东西吗？

Answer 1

对此我深表歉意，但我创建了一个 StackBlitz，这个愚蠢的东西不允许我分叉。这不是一个完整的答案，但我在这里提供它是因为评论太长了。

像你一样，我也快疯了，什么都不管用。我遇到了与您相同的错误，当我将其更改为 ClientSideRowModelModule 时，我会收到一条警告，提示我无法使用 MasterDetail，因为它未导入。

尝试在 main.ts 中按照此处 (https://www.ag-grid.com/javascript-grid-modules/) 的概述在全球范围内提供模块。如果我没记错的话，我从 @ag-grid-community/all-modules 导入了 ModuleRegistry（@ag-grid-enterprise/all-modules 没有像文档中显示的那样），从 @ag-grid-enterprise/all-modules 导入 AllModules 和然后在 platformBrowserDynamic().bootstrapModule 之前做 ModuleRegistry.registerModules(AllModules);。这删除了错误和警告（只是 error/warning 不提供许可证密钥）。我认为它的主题不合适，但也许这很容易解决。

IMO，ag-grid 中的 documentation/implementation 很糟糕，似乎到处都是。例如，如果您不能复制和粘贴他们的演示解决方案并且它不起作用，如果您问我，那就太糟糕了。