ag-grid 单元渲染错误

Question

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

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文件如下

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

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

Answer 1

您不应该在 main.ts 中声明它，在 app.module.ts 中您需要如下内容：

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 文件：

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

Answer 2

查看 ag-Grid SystemJS Docs for an overview of what you need to do, but for a full working example you can also refer to the ag-Grid Angular Example Repo 以获得完整的工作示例（使用 SystemJS、Webpack 或 AngularCLI）。

不过，请确保您的模块中包含以下内容：

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents([...optional Angular 2 Components to be used in the grid....]]),
        ...
})

并且在您的 SystemJS 配置中，您可能需要添加：

System.config({
        defaultJSExtensions: true,
        map: {
            'app': 'app',
            // angular bundles
            '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
            '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
            '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
            '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'node_modules/rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            // ag libraries
            'ag-grid-ng2': 'node_modules/ag-grid-ng2',
            'ag-grid': 'node_modules/ag-grid',
            'ag-grid-enterprise': 'node_modules/ag-grid-enterprise'
        },
        packages: {
            app: {
                main: './boot.js'
            },
            'ag-grid': {
                main: 'main.js'
            }
        }
    }
);

ag-grid 单元渲染错误

ag-grid cell rendering error

typescript

ag-grid

angular2-forms

angular