1
私はIonic 2とAG-gridを初めて使用しています。私は、イオン2テンプレート（sidemenu）の例を使って遊んでいて、Visual Studio 2015にインポートしました。すべて正常に動作しているようです。ionic2でag-gridを使用しようとするとエラーが発生する
私は、使用するデータグリッドを探していて、ag-gridを見つけました。 Ionic 2アプリケーションでこれを探求したかったのです。
指示here後、私はノードパッケージをインストールしているので、私は
"ag-grid": "^4.2.7",
"ag-grid-ng2": "^4.2.2",
私のpackage.jsonに次きた私は、テスト.TSファイルにインポートして、ディレクティブが含まれていた。..
...
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;
...
さて、私はSystemX言及よりもラインをどうするかわからない。..
System.config({
packages: {
lib: {
...
私はそこで何もしなかった。
私はまた、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" />
でcssファイルが含まれていると私は、これらのための404（パスとして正しいように見える理由は、わからない）を取得しています。
最大のエラーは、ag-gridタグがエラーを生成することです。
ですから、例えばあたりのように私は私のページのHTMLに次き..
<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>
しかし、私は（イオンサーブ使用して）実行して、私は次のエラーを取得する。..
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected closing tag "ag-grid-ng2" ("
[ERROR ->]</ag-grid-ng2>
</ion-content>
"): [email protected]:2
それはag-grid-ng2タグが好きではないので、私は何かを正しく設定していません。
このag-gridをIonicに統合するためにもっと多くのステップが必要な場合は誰にも知っていますか？そこにはag-gridのlibファイルをapp.bundle.jsに追加する必要がありますか？ スタイルシートに関して
rowHeight="22"
rowSelection="multiple"> <=== here
</ag-grid-ng2>
次のエラーを取得するcore_1.NgModuleがあります（匿名関数）@ app.bundle.js：49643378 ../ agComponentFactory @ app.bundle.js：49655s @ app.bundle.js：1（匿名関数）@ app.bundle.js：1380 ../ lib/agAware @ app.bundle.js：49751s @ app.bundle。js：1（匿名関数）@ app.bundle.js：11 ../コンポーネント/サイドバー/サイドバー@ app.bundle.js：15s @ app.bundle.js：1e @ app.bundle.js：1（無名関数）@ app.bundle.js：1 http：// localhost：8100 /？restart = 719616に移動 アイデアはありますか？ –