ag-grid 单元格渲染错误 [英] ag-grid cell rendering error

问题描述

我正在使用 AG-GRID api 在我的网站的 main.ts 文件下填充一个表格，我添加了以下代码

I am using the AG-GRID api to populate a table in my website under the main.ts file i have added the following code

import { bootstrap }        from 'angular2/platform/browser';
import { AppComponent }     from './app.component';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { AgGridModule }     from 'ag-grid-ng2/main';

bootstrap(AppComponent, [ROUTER_PROVIDERS],AgGridModule);

我的主要component.ts文件如下

my main component.ts file is as following

import { Component }   from 'angular2/core';
import { GridOptions } from 'ag-grid/main';

@Component({
    moduleId: module.id,
    templateUrl:"app/grid.component.html";
})

export class gridComponent{

    public gridOptions:GridOptions;

    constructor() {
        this.gridOptions = <GridOptions>{};
        this.gridOptions.rowData = this.createRowData();

        this.gridOptions.columnDefs = this.createColumnDefs();
    }

    private onCellValueChanged($event) {
        this.gridOptions.api.refreshCells([$event.node],["cube"]);
    }

    private createColumnDefs() {
        return [
            {headerName: "Row 1", field: "row", width: 140}
        ];
    }

    public refreshRowData() {
        let rowData = this.createRowData();
        this.gridOptions.api.setRowData(rowData);
    }

    private createRowData() {
        let rowData:any[] = [];

        for (var i = 0; i < 15; i++) {
            rowData.push({
                row: "Name" + i
            });
        }
        console.log(rowData);
        return rowData;
    }
}

当我编译时，出现找不到模块的错误.谁能帮忙提前致谢

When i compile i get a error of module not found. Can anyone help Thanks in advance

推荐答案

您不应该在 main.ts 中声明它，在 app.module.ts 中您需要类似以下内容:

You shouldn't declare it in main.ts, in app.module.ts you need something like the following:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { AgGridModule }  from 'ag-grid-ng2/main';

@NgModule({
    imports:[ 
        BrowserModule, 
        AgGridModule 
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

然后在 system.config.js 中，您需要告诉 angular 在哪里可以找到 ag-grid 文件:

Then in system.config.js you need to tell angular where to find the ag-grid files:

System.config({
    map: {
        ...
        // ag libraries
        'ag-grid-ng2' : 'node_modules/ag-grid-ng2',
        'ag-grid' : 'node_modules/ag-grid',
    },
    packages: {
        'ag-grid-ng2': {
            defaultExtension: "js"
        },
        'ag-grid': {
            defaultExtension: "js"
        },
        ...other packages
    }
}

更多信息可在 angular2 站点 https://www.ag-grid.com/ag-grid-angular-systemjs

More information is available on the angular2 site https://www.ag-grid.com/ag-grid-angular-systemjs

这篇关于ag-grid 单元格渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！