Ag 网格无法正确呈现（Angular 2 - webpack2）答案

【问题标题】：Ag grid does not render properly (Angular 2 - webpack2)Ag 网格无法正确呈现（Angular 2 - webpack2）
【发布时间】：2017-05-15 16:02:12
【问题描述】：

我目前正在尝试在我的 angular2 项目中注入 ag-grid，但在渲染它时遇到了问题。

我正在尝试使用这个 ag-grid package 并按照教程使用命令“dotnet new angular”生成的 .net 项目。

这是我的 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-grid-angular/main”导入了 AgGridModule，但结果很糟糕：

有人可以请教我吗？提前谢谢你。

【问题讨论】：

看起来您没有获取 css 文件，这些文件是在某处导入的吗？

标签： asp.net angular npm webpack ag-grid

【解决方案1】：

Angular 2/4 和 Visual Studio 2017 的新手，但遇到了同样的问题。阅读上面的两个答案非常有帮助。

我执行了以下操作以使原始问题中的相同样本正常工作

将 CSS 文件从 MyApp/node_modules/ag-grid/dist/styles 复制到 MyApp/wwwroot 下的文件夹 ( MyApp/wwwroot/node_modules/ag-grid/dist/styles )。注意：只复制 CSS 文件。

编辑您的 Index.cshtml 文件以包含两个“链接”标签。

@{ 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>

}

希望获得有关更优雅解决方案的反馈...谢谢

【讨论】：

【解决方案2】：

这是加载 CSS 样式的问题，请确保您已正确导入 CSS 文件。

【讨论】：

【解决方案3】：

请在您的主 html 文件头中添加以下行。（以

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

【讨论】：