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，因为它没有被导入。

尝试按照此处 (https://www.ag-grid.com/javascript-grid-modules/) 在 main.ts 中概述的方式提供全局模块。如果我没记错的话，我从@ag-grid-community/all-modules 导入ModuleRegistry（@ag-grid-enterprise/all-modules 没有像他们在文档中显示的那样），从@ag-grid-enterprise/all-modules 导入AllModules 然后在platformBrowserDynamic().bootstrapModule 之前执行ModuleRegistry.registerModules(AllModules); .这消除了错误和警告（只是不提供许可证密钥的错误/警告）。在我看来，它的主题是关闭的，但也许这很容易解决。

IMO，这是来自ag-grid 的糟糕文档/实现，似乎到处都是。例如，如果您无法复制和粘贴他们的演示解决方案并且它无法正常工作，如果您问我，那就太糟糕了。