尝试将 ag-grid-angular 合并到我的项目中。我已经成功地让它通过过滤和排序来处理静态数据。
我现在无法使用异步动态数据设置它。
<ag-grid-angular
style="width: 1100px; height: 1000px;"
class="ag-theme-balham"
[enableSorting]="true"
[enableFilter]="true"
id ="mygrid"
[animateRows]="true"
[rowData]="rowss | async"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
在 component.ts 中:
public rowss: any = null;
this.rowss = this.Service.getReport(this.model)
我现在已经静态设置了列
columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
在 Service.ts 中:
getReport( request: ReportModel ) {
return this.http.get( this.URL + super.jsonToQueryParam( request ) ).map(( response: Response ) => response.json() );
}
我收到此错误消息:
ng:///ProdCtnReportModule/ProdCtnReportComponent.ngfactory.js:100 ERROR TypeError: rowData.forEach is not a function
at ClientSideNodeManager.recursiveFunction (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:193)
at ClientSideNodeManager.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:65)
at ClientSideRowModel.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideRowModel.js:483)
at GridApi.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/gridApi.js:156)
at Function.ComponentUtil.processOnChange (webpack-internal:///./node_modules/ag-grid/dist/lib/components/componentUtil.js:120)
at AgGridNg2.ngOnChanges (webpack-internal:///./node_modules/ag-grid-angular/dist/agGridNg2.js:363)
at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12623)
at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14151)
at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14094)
at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14987)
我们从 API 调用中获取的数据与我在静态设置时使用的数据相同。返回结果是请求的数组。 请建议需要做什么才能让它发挥作用。
这里的错误是您正在尝试将 Observable 分配为 ag-grid 的数据。
.map()
返回一个您应该订阅并向 ag-grid 提供数据的可观察对象。
像这样的 -
const rowss$ = this.Service.getReport(this.model);
rowss$.subscribe(rowData => {
params.api.setRowData(rowData);
});
记住这个错误-
rowData.forEach 不是函数
是一个很好的指标,表明您的 rowData 不是数组。
更多地图与订阅这里
AgGrid - 角度 1. 后端:首先确保你的后端返回一个对象数组 例如:List detail = new ArrayList<>();
[
{
"stockId": 1,
"side": "Buy",
"status": "Saved"
},
{
"stockId": 2,
"side": "Sell",
"status": "Saved"
}
]
如果您将企业版用于主从,那么您需要确保控制器中的 findById 返回一个包含 1 个对象的数组 [{}]
agGrid 文档: https://www.ag-grid.com/javascript-grid-master-detail/ 在 AgGrid 文档示例的这个链接中,下面的 callRecords 字段返回一个对象数组。
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
}
我希望这有帮助。
同意@Pratik 的观点,消息肯定倾向于属性不是数组。
但是,我将发布我们的一些不同场景,该场景为其他绊倒这篇文章的人产生了这个例外。
我们的 columnDefs 是
any[]
类型的私有属性,我们有一个格式错误的 getter 方法,只有方法名称作为签名。能够通过将方法声明为公共吸气剂来解决。
即
这会产生异常:
private columnDefs: any[];
getColumnDefinitions() {
return columnDefs;
}
这可以正常工作:
private columnDefs: any[];
public get ColumnDefinitions() {
return columnDefs;
}