Ag Grid 不显示数据

Question

我正在尝试实现这个 Ag Grid for Angular CLI，我已经按照他们在文档中提到的每一个步骤进行操作，但是“值”列是空的并且没有显示数据。我在控制台中没有看到任何错误。我试图调试但没有运气。请帮忙

请告诉我我做错了什么

MyGridApplicationComponent

import {
  Component,
  OnInit
} from '@angular/core';
import {
  GridOptions
} from "ag-grid";
import {
  RedComponentComponent
} from "../red-component/red-component.component";


@Component({
  selector: 'app-my-grid-application',
  templateUrl: './my-grid-application.component.html',
  styleUrls: ['./my-grid-application.component.css']
})
export class MyGridApplicationComponent {
  private gridOptions: GridOptions;

  constructor() {
    this.gridOptions = < GridOptions > {};
    this.gridOptions.columnDefs = [{
        headerName: "ID",
        field: "id",
        width: 200
      },
      {
        headerName: "Value",
        field: "value",
        cellRendererFramework: RedComponentComponent,
        width: 200
      },

    ];
    this.gridOptions.rowData = [{
        id: 5,
        value: 10
      },
      {
        id: 10,
        value: 15
      },
      {
        id: 15,
        value: 20
      }
    ]
  }
}

红色组件组件

import {
  Component
} from "@angular/core";

@Component({
  selector: 'app-red-component',
  templateUrl: './red-component.component.html'
})
export class RedComponentComponent {
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }
}

Answer 1

我使用的是 cellRenderer 而不是框架

columnDef.cellRenderer = KeyRenderer;
columnDef.width = 20;
columnDef.editable = false;

并且在您的渲染器中您需要渲染一些东西。默认网格渲染器给出 html 所以你需要做同样的事情。即

 import { ICellEditor, ICellEditorParams, ICellRenderer, CellEditorFactory } from 'ag-grid/main';

export class KeyRenderer implements ICellRenderer {

    private params: any;
    htmlDiv: HTMLDivElement;

    init(params) {


        this.htmlDiv = document.createElement("div");
        this.htmlDiv.style.width = "100%";
        this.htmlDiv.style.height = "100%";
        this.htmlDiv.style.textAlign = "center";
        this.htmlDiv.style.verticalAlign = "middle";



        if (params.data.IsKeyField) {
            if (params.data.IsKeyField == true) {
                this.htmlDiv.innerHTML = "<img src='/images/icon/key.png' style='height:15px'/>";
            }
        }

    }

    getGui() {
        return this.htmlDiv;
    }

    refresh(params: any): boolean {
        this.params = params;

        return true;
    }
}

希望对您有所帮助

Answer 2

这是一个愚蠢的错误，我没有在 Redcomponent html 中渲染参数值。

下面的代码解决了这个问题

<span style="color: red">{{params.value}}</span>

Ag Grid 不显示数据

Ag Grid not displaying data

ag-grid

angular-cli

angular