AG-網格單元的渲染誤差

Question

我使用AG-GRID API來填充表在我的網站下的文件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; 
    } 
} 

當我編譯我得到一個錯誤的模塊找不到。 誰能幫助 在此先感謝

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你需要告訴角在哪裏可以找到AG-網格文件：

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以瞭解您需要做什麼的概述，但對於完整的工作示例，您還可以參考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' 
      } 
     } 
    } 
);