Question

我目前正在尝试在我的angular2项目中注入ag-grid，并且我在渲染时出现问题。

我尝试使用此ag-grid package并按照教程使用命令＆＃39; dotnet new angular ＆＃39;生成的.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>

我从＆＃34; ag-grid-angular / main＆＃34;中小心地导入了AgGridModule，但结果非常糟糕：

有人可以开导我吗？提前谢谢。

Answer 1

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

Answer 2

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

我做了以下操作，以便在原始问题中获得相同的样本

将MyApp / node_modules / ag-grid / dist / styles中的CSS文件复制到MyApp / wwwroot下的文件夹（MyApp / wwwroot / node_modules / ag-grid / dist / styles）。注意：仅复制CSS文件。

编辑您的Index.cshtml文件以包含两个＆＃34;链接＆＃34;标签

@ { ViewData [＆＃34;标题＆＃34;] =＆＃34;主页＆＃34 ;; } @ 加载... 的@ 加载...

@section scripts {

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

}

想要更优雅的解决方案的反馈......谢谢

Answer 3

请在主html文件标题中添加以下行。（以＆lt; symbol开头）

link href =“/ node_modules / ag-grid / dist / styles / ag-grid.css”rel =“stylesheet”/＆gt; link href =“/ node_modules / ag-grid / dist / styles / theme-fresh.css”rel =“stylesheet”/＆gt;

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

3 个答案: