时间戳

首页 > 解决方案 > 如何使用 Angular 在 Ag-Grid 中为一行着色

angular - 如何使用 Angular 在 Ag-Grid 中为一行着色

问题描述

当我的后端返回特定属性时，我需要为一行着色。我正在使用带有 Angular 的 Ag-grid。起初我只是尝试为一行着色，没有任何规则，只是为了测试，但它仍然没有用。

我的 HTML：

<ag-grid-angular   
#agGrid   style="width: auto; height: 300px;"   class="ag-theme-material"   
(gridReady)="onGridReady($event)"   
[rowData]="rowData"   
[gridOptions]="gridOptions"   
[rowClassRules]="rowClassRules"   
[columnDefs]="columnDefs"   
[defaultColDef]="defaultColDef"   
[modules]="modules"   
[pagination]="true"   
[paginationPageSize]="paginationPageSize"   
[domLayout]="domLayout"   
[rowHeight]="rowHeight"   
[overlayLoadingTemplate]="overlayLoadingTemplate"   
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
> </ag-grid-angular>

我的.ts：

我的网格设置：

this.agGridService.getHeaderPlan().subscribe(header => {
  this.columnDefs = header;
});

this.defaultColDef = {
  enableRowGroup: true,
  enablePivot: true,
  enableValue: true,
  sortable: true,
  filter: true,
  resizable: true,
  editable: true
};

this.paginationPageSize = 8;
this.domLayout = 'autoHeight';
this.rowHeight = 40;
this.overlayLoadingTemplate =
  `<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>`;

this.overlayNoRowsTemplate =
  `<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>`;
}

当我将数据放在网格上时：

ngAfterViewInit(): void {
this.importService.getPlan().subscribe((data: Plan[]) => {
  this.rowData = data;
}, error => {
  this.httpError = error;
  this.onBtHide();
});
}

我的 OnGriReady 函数：

onGridReady(params) {
   this.gridApi = params.api;
   this.gridColumnApi = params.columnApi;

// this.rowClassRules = {
//   'rowError': function (params) {
//     console.log(params.params.data.ANF);

//     const numSickDays = params.data.ANF;
//     return numSickDays > 24 && numSickDays <= 43;
//   }
// };
}

我做什么工作。我尝试执行此规则，但没有再次执行。我把我的 CSS 属性放在 style.css 和 component.css

请帮助我。

标签： angularag-gridag-grid-angular

解决方案

将类放在 style.css 中并将其传递给 gridOptions：

// all rows assigned CSS class 'my-green-class'
gridOptions.rowClass = 'my-green-class';

// use the condition on the row based on the data in side the param
gridOptions.getRowClass = function(params) {
    if (params.data.ANF > 24 && numSickDays <= 43) {
        return 'my-shaded-effect';
    }
}

推荐阅读