ag-Grid：无法找到键 xxx 的 cellRenderer答案

【问题标题】：ag-Grid: unable to find cellRenderer for key xxxag-Grid：无法找到键 xxx 的 cellRenderer
【发布时间】：2018-11-17 06:08:50
【问题描述】：

我正在使用 AG 网格

下面是我的代码

$scope.columnDefs = [{
    cellRenderer: 'childMessageRenderer',
    field: "ID",
    cellRendererParams: {
        rendererImage: 'rain.png'
    },
    headerName: "Edit"
}];
$scope.gridOptions = {
    columnDefs: $scope.columnDefs,
    rowData: $scope.rowData,
    rowHeight: 48,
    headerHeight: 50,
    onRowSelected: onRowSelected,
    components: {
        childMessageRenderer: $scope.childMessageRenderer
    }
};

$scope.childMessageRenderer = function(params) {
    var rainPerTenMm = 5;
    return $scope.createImageSpan(rainPerTenMm, params.rendererImage);
}
$scope.createImageSpan = function(imageMultiplier, image) {
    var resultElement = document.createElement("span");
    for (var i = 0; i < imageMultiplier; i++) {
        var imageElement = document.createElement("img");
        imageElement.src = "some image url";
        resultElement.appendChild(imageElement);
    }
    return resultElement;
}

这给了我一个错误。不知道我错过了什么

ag-Grid：无法找到关键 childMessageRenderer 的 cellRenderer

【问题讨论】：

你需要定义单元格渲染的函数。
是的，我已经定义了 $scope.childMessageRenderer

标签： javascript angularjs ag-grid

【解决方案1】：

试试下面的代码..

$scope.columnDefs = [
    {
        cellRenderer: 'childMessageRenderer',
        field:"ID",
        cellRendererParams: {
            rendererImage: 'rain.png'      
        },
        headerName: "Edit"
    }];
$scope.gridOptions = {
        columnDefs: $scope.columnDefs,
        rowData: $scope.rowData,
        rowHeight: 48,
        headerHeight: 50,
        onRowSelected: onRowSelected,
        components: {
            childMessageRenderer: childMessageRenderer
        }
    };

function childMessageRenderer(params) {
        var rainPerTenMm = 5;
        return createImageSpan(rainPerTenMm, params.rendererImage);
    }
function createImageSpan(imageMultiplier, image) {
        var resultElement = document.createElement("span");
        for (var i = 0; i < imageMultiplier; i++) {
            var imageElement = document.createElement("img");
            imageElement.src = "some image url";
            resultElement.appendChild(imageElement);
        }
        return resultElement;
    }

【讨论】：