ag-Grid：無法找到密鑰xxx的cellRenderer

Question

我正在使用AG Grid

下面是我的代碼

$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

Answer 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;
    }