试图在我的项目中加入 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 …我将 Ag-Grid 与 Angular 一起使用，我想收听任何修改列状态的事件。
截至目前，我必须列出所有事件：
(columnVisible)=onCol($event)(columnMoved)=onCol($event)是否有我可以依赖的通用或更高级别的事件来监听列状态的任何更改？
我在我的 Angular 应用程序中使用 Ag-grid，并且网格中的数据是从 Web 服务填充的。我在这个网格中实现了单元格编辑，所以当我单击其中一列时，整行都将是可编辑的，当我在网格外单击时停止编辑。以下是html和组件文件中的代码：
<ag-grid-angular #agGrid style="width: 100%; height: 600px;" class="ag-theme-balham left" [rowData]="rowData" [columnDefs]="columnDefs"
[gridOptions]="gridOptions" rowSelection="multiple" pagination=true (rowSelected)="onRowSelected($event)">
</ag-grid-angular>
component.ts 文件：
this.gridOptions = {
defaultColDef: {
editable: (event: any) => {
if (this.isGridDataEditable) {
return true;
} else {
return false; // true/false based on params (or some other criteria) value
}
},
filter: true
},
singleClickEdit: true,
stopEditingWhenGridLosesFocus: true,
paginationPageSize: 20,
editType: 'fullRow',
onCellValueChanged: (event: any) => {
},
onRowValueChanged: (event: any) => {
},
onRowEditingStopped: (event: …在我的 ag-grid 中，当我按列进行分组并单击进行排序时，即使对于数值，组也会按字母顺序排序。
有没有办法提供一个取决于分组（行组）列类型的比较器？
要重现该问题： 1. 在下面的朋克中，尝试按年龄行进行分组 2. 按升序或降序排序按组排序 3. 组按字母排序而不是按值排序（排序降序时的年龄顺序为：15,16 ,17,18,19,2,20,200,21,22....)！
链接：https://plnkr.co/edit/FjJOYQgsz46KDQfoNCQF ?p=preview
export class AppComponent {
private gridApi;
private gridColumnApi;
private columnDefs;
private defaultColDef;
private sideBar;
private frameworkComponents;
private rowData: [];
constructor(private http: HttpClient) {
this.columnDefs = [
{
field: "athlete",
width: 150,
filter: "agTextColumnFilter",
sortable: true
},
{
field: "age",
width: 90,
sortable: true
},
{
field: "country",
width: 120,
sortable: true
},
{
field: "year",
width: 90,
sortable: true
},
{
field: "date",
width: 110 …我收到了来自服务的以下响应，当该响应flag为真时，我必须隐藏整行（我共有 20 列），否则显示它。我怎样才能在ag-grid中实现这一目标？
data = {
name: "A",
flag: true
},
{
name: "B",
flag: false
},
{
name: "C",
flag: false
}
我确实尝试了useExternalFilter下面的类似方法，然后我陷入了如何useExternalFilter进一步使用它的困境。任何人都可以指导我完成吗？
this.filterOptions = {
useExternalFilter: true
};
this.gridOptions = {
filterOptions: this.filterOptions
};
如何在pinnedBottomRowData整个底行添加背景
这是代码
列表.component.ts
columnDefs = new Array();
rowData = new Array();
pinnedBottomRowData: any;
ngOnInit() {
this.columnDefs = [
{
'headerName': 'Style/Machine',
'field': 'total',
}
];
for (let i = 1; i < 30; i++) {
this.rowData.push(
{
'total': 'Machine ' + i
}
);
}
this.pinnedBottomRowData = this.createData(1);
}
createData(count: number) {
const result = [];
for (let i = 0; i < count; i++) {
result.push({
total: 'Total Machine'
},
{
total: 'Total',
});
}
return result; …我想了解 ag-grid 的 valuegetter vs valueformatter vs valueparser 的正确用例是什么？
https://www.ag-grid.com/javascript-grid-value-getters/
我有一个使用 AgGrid 表的 Angular9 应用程序。有几个表包含日期列——“pickup_date”、“return_date”等。我想让用户在编辑这些列中的单元格时使用日期选择器来选择日期。AgGrid 的文档有一个使用 jQuery 的日期选择器来实现此目的的示例 - https://www.ag-grid.com/javascript-grid-cell-editing/#example-datepicker-cell-editing。但我想避免在我的应用程序中使用 jQuery。有没有办法将任何其他日期选择器（例如 Angular Material Datepicker）连接到单元格编辑器？
谢谢你的帮助。
如何获取 ag-grid 中应用排序的列列表。有一个 api (onSortChanged) 和一个事件 (sortChanged)。但在这种情况下两者都没有帮助。
我有一个包含两列的 ag-Grid：ID 列和描述列。我在 TypeScript 类的 ngOnInit() 方法的 columnDefs 中构造了这两列的列定义。
在“描述”列中，我使用 cellRendererFramework 在我的 ag-Grid 中渲染 routerLink。我使用 cellRendererParams 将一些必要的参数传递到我的 Angular 渲染器组件。正是在“描述”列中，我需要访问 ID 列的 ID 值，并将其放入 cellRendererParams 参数“resourceId”中。我需要这个 ID 才能构建我的工作 RouterLink。
我怎样才能在下面的代码中做到这一点？
ngOnInit() {
this.columnDefs = [
// Column A - ID
{
headerName: 'ID',
field: 'id',
width: 80,
sort: 'desc'
},
// Column B - Description
{
headerName: 'Description',
field: 'description',
width: 150,
cellRendererFramework: AgGridRouterLinkRendererComponent,
cellRendererParams: {
resourcePath: '/leverance/detail',
resourceId: HERE-I-WOULD-LIKE-TO-ACCESS-THE-ID-VALUE-OF-THE-ID-FIELD-IN-THE-ID-COLUMN-ABOVE
}
];
}