ag-Grid:找不到 rowModelType 客户端的匹配行模型 [英] ag-Grid: could not find matching row model for rowModelType clientSide
问题描述
我正在尝试在 ag-grid 文档中重新创建此示例:https://www.ag-grid.com/javascript-grid-master-detail/
I'm trying to recreate this example in the ag-grid docs: https://www.ag-grid.com/javascript-grid-master-detail/
我收到了这个错误，我不知道为什么.其他一切似乎都运行良好:
and I'm getting this error which I'm not sure why. Everything else has seemed to work fine:
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';
这是我的组件中的确切代码:
And here is the exact code in my component:
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;
});
}
}
它与文档中的示例几乎相同.
It's pretty much identical to the example in the docs.
这是我的 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 中正确添加了所有内容:
Without all of these dependencies, I run into issues. Is there something I'm missing here? I've added everything correctly in my app.module.ts as well:
import { AgGridModule } from 'ag-grid-angular';
@NgModule({
imports: [
AgGridModule.withComponents([])
]
})
^ 这被缩短以使其更易于阅读.但是我在这里遗漏了一些明显的东西吗?
^ This was shortened to make it easier to read. But am I missing something obvious here?
推荐答案
我对此深表歉意，但我创建了一个 StackBlitz 并且愚蠢的事情不允许我分叉.这不是一个完整的答案，但我在这里提供它，因为评论太长了.
I apologize for this but I created a StackBlitz and the stupid thing would not allow me to fork. This is not a complete answer but I am providing it here because it is too long for a comment.
和你一样，我也快疯了，没有任何效果.我遇到了和你一样的错误，当我把它改成 ClientSideRowModelModule 时，我会收到一个警告，说我不能使用 MasterDetail，因为它没有被导入.
Like you, I was going crazy as well and nothing was working. I was getting the same error as you and when I changed it to ClientSideRowModelModule, I would get a warning that I cannot use MasterDetail because it is not imported.
尝试按照此处概述的那样全局提供模块 (https://www.ag-grid.com/javascript-grid-modules/) 在 main.ts 中.如果我没记错的话，我从 @ag-grid-community/all-modules (@ag-grid-enterprise/all-modulescode> 没有像文档中显示的那样)，从 @ag-grid-enterprise/all-modules 导入 AllModules 然后执行 ModuleRegistry.registerModules(AllModules); 就在 platformBrowserDynamic().bootstrapModule 之前.这消除了错误和警告(只是不提供许可证密钥的错误/警告).在我看来，它的主题是关闭的，但也许这可以很容易解决.
Try providing the modules globally as outlined here (https://www.ag-grid.com/javascript-grid-modules/) in main.ts. If I can recall correctly, I imported ModuleRegistry from @ag-grid-community/all-modules (@ag-grid-enterprise/all-modules did not have it like they show in the documentation), import AllModules from @ag-grid-enterprise/all-modules and then do ModuleRegistry.registerModules(AllModules); right before platformBrowserDynamic().bootstrapModule. This removed the errors and warnings (just the error/warning of not providing a license key). The theming of it was off in my view but maybe that can be an easy fix.
IMO，这是来自 ag-grid 的糟糕文档/实现，似乎到处都是.例如，如果您无法复制和粘贴他们的演示解决方案并且它不起作用，如果您问我，那就太糟糕了.
IMO, this is bad documentation/implementation from ag-grid, seems to be all over the place. For instance, if you can't copy and paste their demonstration solution and for it not to work, pretty bad if you ask me.
这篇关于ag-Grid:找不到 rowModelType 客户端的匹配行模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
