Agグリッドが正しくレンダリングされない（Angular 2 - webpack2）

Question

現在、私はangular2プロジェクトにag-gridを注入しようとしていますが、レンダリングに問題があります。

私はこのag-grid packageを使用し、コマンド 'dotnet new angular'で生成された.net projetでチュートリアルに従います。ここで

は私agGrid.component.tsです：

import { Component } from '@angular/core'; 
import { GridOptions } from "ag-grid/main"; 

@Component({ 
    selector: 'ag-grid-component', 
    templateUrl: './agGrid.component.html' 
}) 
export class AgGridComponent { 

    private gridOptions: GridOptions; 
    public rowData: any[]; 
    private columnDefs: any[]; 

    constructor() { 

     this.gridOptions = <GridOptions>{}; 
     this.createRowData(); 
     this.createColumnDefs(); 
     this.gridOptions.defaultColDef = { 
      headerComponentParams: { 
       menuIcon: 'fa-bars' 
      } 
     } 

    } 

    private createRowData() { 
     this.rowData = [ 
      { make: "Toyota", model: "Celica", price: 35000 }, 
      { make: "Ford", model: "Mondeo", price: 32000 }, 
      { make: "Porsche", model: "Boxter", price: 72000 } 
     ]; 
    } 

    private createColumnDefs() { 
     this.columnDefs = [ 
      { headerName: "Make", field: "make" }, 
      { headerName: "Model", field: "model" }, 
      { headerName: "Price", field: "price" } 
     ]; 
    } 

} 

そして、私のagGrid.component.html：

<ag-grid-angular #agGrid style="width:500px;height:200px" class="ag-fresh" 
        [gridOptions]="gridOptions" 
        [columnDefs]="columnDefs" 
        [rowData]="rowData"> 
</ag-grid-angular> 

私は慎重に "AG-グリッド-角度/メイン" からAgGridModuleを輸入し、しかし、結果はかなりひどいです：

できる人ENL私を元気づける？前もって感謝します。

Answer 1

これはCSSスタイルの読み込みの問題です。CSSファイルを正しく読み込んだことを確認してください。

Answer 2

あなたのメインのHTMLファイルのヘッダーに行の下に追加してください。（<記号で始まる）

リンクのhref = "/ node_modules/AG-グリッド/ DIST /スタイル/ AG-grid.css" のrel = "スタイルシート"/> リンクhref ="/node_modules/ag-grid/dist/styles/theme-fresh.css "rel =" stylesheet "/>

Answer 3

角度2/4とVisual Studio 2017の新機能ですが、同じ問題。上記の2つの答えを読んだことは驚くほど助けになりました。

私はMyAppの/ wwwrootの下のフォルダにMyAppに/ node_modules/AG-グリッド/ DIST /スタイルからCSSファイルをコピーし

1. 作業元の質問で同じサンプルを取得するには、次のでした（のMyApp/wwwroot/node_modules/ag-grid/dist/styles）を参照してください。 注：：CSSファイルのみをコピーします。

2. Index.cshtmlファイルを編集して、2つの「リンク」タグを含めます。

   @ { ViewData ["Title"] = "ホームページ"; } 読み込んでいます... @ロード@ ...

   @sectionスクリプト{

   <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" /> 
   
   
   <script src="~/dist/main-client.js" asp-append-version="true"></script> 
   

   }

は、よりエレガントな解決策に関するフィードバックをしたいと思います。 ..thanks