Angular 每当CellValueChange时，立即在agGrid上应用CellStyle

我在Angular中使用agGrid

当单元格值更改时，我需要将单元格的背景色设置为黄色，当有人编辑使值为空时，我需要将背景色设置为红色

这是密码

import { Component, OnInit } from '@angular/core';
import { APICallService } from '../../.././PortalServices/webapicall.service';

@Component({
    selector: 'master-gender',
    templateUrl: 'app/PortalPages/MasterPages/GenderMaster/gender.component.html',
    providers: [APICallService],
})

export class GenderComponent implements OnInit {
    private updateDict = new Map();
    genderRowData: [];  

    constructor(private genderService: APICallService) {
    }

    ngOnInit() {
        this.genderService.getApiCall('getallgenders')
            .subscribe((rowData) => this.genderRowData = rowData,
                (error) => { alert(error) }
            );   
    }

    columnDefs = [
        {
            headerName: 'Gender Name', field: 'Name',                                          
            onCellValueChanged: this.genderCellValueChanged.bind(this)           
        },
    ]

    genderCellValueChanged(event: any) {
        const cell = event.api.getFocusedCell();
        if (event.oldValue !== event.newValue) {
            if (event.newValue == '')
              cell.column.colDef.cellStyle = { 'background-color': 'red' }; 
            else
               cell.column.colDef.cellStyle = { 'background-color': 'yellow' }; 
         }
         event.api.refreshCells(cell);     
    }
}

当单元格值第一次更改时，单元格样式从未应用。但是，当我第二次尝试编辑单元格时，应用了cellStyle。我尝试使用redrawRows（），但它影响了整个列，这是我不想要的。每当值改变时，我想改变单元格的样式

---

如何立即刷新样式？

您必须在

ColDef

中提供它

参考：

---

当您将字段标记为可编辑且值更新时，颜色将更改。

您必须在

ColDef

中提供它

参考：

---

当您将字段标记为可编辑且值更新时，颜色将发生更改。

我得到了问题的答案。希望这个答案能帮助那些想要实现相同功能的人

单元格的刷新是强制完成的。修改了以下函数：-

genderCellValueChanged(event: any) {
        const cell = event.api.getFocusedCell();
        if (event.oldValue !== event.newValue) {
            if (event.newValue == '')
              cell.column.colDef.cellStyle = { 'background-color': 'red' }; 
            else
               cell.column.colDef.cellStyle = { 'background-color': 'yellow' }; 
         }
         let refreshParams = {
            force: true,
            rowNodes: [event.node]
        };
        event.api.refreshCells(refreshParams);   
    }

---

我得到了我问题的答案。希望这个答案能帮助那些想要实现相同功能的人

单元格的刷新是强制完成的。修改了以下函数：-

genderCellValueChanged(event: any) {
        const cell = event.api.getFocusedCell();
        if (event.oldValue !== event.newValue) {
            if (event.newValue == '')
              cell.column.colDef.cellStyle = { 'background-color': 'red' }; 
            else
               cell.column.colDef.cellStyle = { 'background-color': 'yellow' }; 
         }
         let refreshParams = {
            force: true,
            rowNodes: [event.node]
        };
        event.api.refreshCells(refreshParams);   
    }

---

这在我的情况下不起作用。我在agGrid中还有几个标题，所以我把colDef放在数组中。你能给出一个工作示例吗？我提供的代码中有一些类型，已经更新了。这很直截了当。你能给我plunk或stackblitz复制这些问题吗？这在我的情况下不起作用。我在agGrid中还有几个标题，所以我把colDef放在数组中。你能给出一个工作示例吗？我提供的代码中有一些类型，已经更新了。这很直截了当。你能给我提供plunk或stackblitz来重现这些问题吗？使用ag grid提供的api会更简单。与调用

api.refreshCell

不同，使用

cellStyle

会更方便。在这种情况下，这种方法可能会影响性能，因为在ag网格范围外进行更新，然后使用api

refreshCells

调用更新，如@Paritosh所述，最好使用所需的逻辑定义

cellStyle

属性。但是cellStyle属性没有event.newValue，通过它我可以理解单元格中的值已更改。有办法吗？@simpleuser其自动跟踪检查更改任何彩色单元格上的值，您将看到结果，如果您需要显示更改检查

cellRenderer:'agAnimateShowChangeCellRenderer'

，使用ag grid提供的api将更简单。与调用

api.refreshCell

不同，使用

cellStyle

会更方便。在这种情况下，这种方法可能会影响性能，因为在ag网格范围外进行更新，然后使用api

refreshCells

调用更新，如@Paritosh所述，最好使用所需的逻辑定义

cellStyle

属性。但是cellStyle属性没有event.newValue，通过它我可以理解单元格中的值已更改。有办法吗？@simpleuser其自动跟踪检查更改任何彩色单元格上的值，您将看到结果，如果您需要显示更改检查

cellRenderer:'agAnimateShowChangeCellRenderer'