Question

当后端返回特定属性时，我需要为行着色。我在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

上

请帮帮我。

Answer 1

将类放入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';
    }
}

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

1 个答案: