Fehler beim Versuch, ag-grid in ionic2 zu verwenden

Question

Ich bin neu in Ionic 2 und AG-Grid. Ich habe mit einem Beispiel ionic 2 Vorlage (sideMenu) gespielt und in Visual Studio 2015 importiert. Alles scheint gut zu laufen.

Ich möchte ein Datengitter zu verwenden, und kam Ag-Grid. So wollte ich das in Ionic 2 Anwendung erkunden.

Nach den Anweisungen here habe ich das Knoten-Paket installiert, so dass ich habe folgend in meinem package.json

"ag-grid": "^4.2.7", 
"ag-grid-ng2": "^4.2.2", 

ich in die Test .ts-Datei importiert und enthalten die Richtlinie ..

... 
import {AgGridNg2} from 'ag-grid-ng2/main' 
import {GridOptions} from 'ag-grid/main' 

@Component({ 
    directives: [AgGridNg2], 
    templateUrl: 'build/pages/aggrid-page/aggrid-page.html' 
}) 
export class AgGridPage { 
    public data: Array<GridRow>; 
    public columnDefs; 
    public gridOptions: any; 
    public showToolPanel; 
    ... 

Nun, ich bin nicht sicher, was mit der Linie zu tun, als die SystemX zu erwähnen ..

System.config({ 
packages: { 
    lib: { 
... 

also habe ich dort nichts gemacht.

Ich habe auch die CSS-Dateien in index.html

<link href="../node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" /> 
<link href="../node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" /> 

und ich erhalte 404 für diese (nicht sicher, warum, wie der Pfad korrekt erscheinen).

Der größte Fehler ist das AG-Grid-Tag erstellt einen Fehler.

So gemäß dem Beispiel, das ich in meiner Seite html folgende Voraussetzungen erfüllt sein ..

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"  
    [gridOptions]="gridOptions" 
    [columnDefs]="columnDefs" 
    [showToolPanel]="showToolPanel" 
    [rowData]="rowData" 

    // boolean values 'turned on' 
    enableColResize 
    enableSorting 
    enableFilter 

    // simple values, not bound 
    rowHeight="22" 
    rowSelection="multiple"> 
</ag-grid-ng2> 

Allerdings, wenn ich laufen (unter Verwendung von ionischen dienen), erhalte ich die folgende Fehlermeldung ..

EXCEPTION: Error: Uncaught (in promise): Template parse errors: 
Unexpected closing tag "ag-grid-ng2" (" 


[ERROR ->]</ag-grid-ng2> 
</ion-content> 
"): AgGridPage@31:2 

Es mag also nicht das ag-grid-ng2-Tag, also habe ich nichts richtig eingerichtet.

Weiß jemand, ob es mehr Schritte bei der Integration dieses Ag-Grid in Ionic gibt? Gibt es etwas mehr, das die ag-grid-lib-Dateien in app.bundle.js enthalten muss?

Vielen Dank im Voraus für jede Hilfe

Answer 1

Sie den Schließbügel > fehlt:

rowHeight="22" 
    rowSelection="multiple"> <=== here 
</ag-grid-ng2> 

Answer 2

Im Hinblick auf die Sheets: Sie müssen entweder Ihre schluck Aufgabe ändern, um sie zählen Der Build (Stylesheets sind nicht standardmäßig enthalten) oder, da ich beide CSS-Dateien in Ihr app/themes-Verzeichnis kopiert oder symbolisiert habe, benenne sie als * .scss um und importiere sie in app.core.scss. Sie werden dann in Ihrer App CSS in Build/CSS enthalten sein.

Beispiel:

@import "./ag-grid"; 
@import "./theme-fresh";