Ошибка рендеринга ячейки ag-grid

Я использую API-интерфейс AG-GRID для заполнения таблицы на моем веб-сайте в файле main.ts. Я добавил следующий код

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

Когда я компилирую, я получаю ошибку модуля не найден. Может кто-нибудь помочь Спасибо заранее

Источник

2 ответа

Решение

Вы не должны объявлять это в 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

Источник

Посмотрите на документы ag-Grid SystemJS, чтобы получить представление о том, что вам нужно делать, но для полного рабочего примера вы также можете обратиться к репозиторию ag-Grid Angular Example для полных рабочих примеров (используя 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'
            }
        }
    }
);
Источник
Другие вопросы по тегам