angular 2 没有显示 Ag-Grid？

Question

我是 angular 2 的新手，正在尝试配置 ag-grid。控制台上有一些关于 ag-grid 的错误。我已经解决了。现在控制台上除了一个错误外没有其他错误，但它与 ag-grid 无关。但仍然没有显示网格。这是代码：在 Package.json 添加：

"ag-grid": "^7.1.0",
    "ag-grid-ng2": "^7.1.2",
    "ag-grid-enterprise": "^7.1.0"

CSS 在布局中添加（使用 angular 2 with .net core(MVC)）：

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

添加到@ngModule

 AgGridModule.withComponents([AboutComponent.AboutComponent ]),

About 是我使用 ag-grid 的组件

Here is the about component:
import { Component, OnInit } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import PageService = require("../../services/page.service");
import { AgGridModule } from "ag-grid-ng2/main";
import { GridOptions } from "ag-grid/main";


@Component({
    //no need for selector as it will be loaded via routing
    templateUrl: "/page/index"
})
export class PageComponent implements OnInit {
    private pages;

    private gridOptions: GridOptions;
    public showGrid: boolean;
    public rowData: any[];
    private columnDefs: any[];
    public rowCount: string;


    constructor(private pageService: PageService.PageService) {
        // we pass an empty gridOptions in, so we can grab the api out

       this.gridOptions = <GridOptions>{};

        this.createRowData();

        this.createColumnDefs();

        this.showGrid = true;

    }

    ngOnInit(): void {
        //this.pages = this.pageService.getAll().subscribe(pages => this.pages = pages.Content);
    }

    private createRowData() {

        const rowData: any[] = [];


        for (let i = 0; i < 10000; i++) {

            const countryData = [];

            rowData.push({
                name: "Zeshan Munir",

                skills: {
                    android: Math.random() < 0.4,

                    html5: Math.random() < 0.4,

                    mac: Math.random() < 0.4,

                    windows: Math.random() < 0.4,

                    css: Math.random() < 0.4

                },

                address: "Lahore",

                years: Math.round(Math.random() * 100),

                proficiency: Math.round(Math.random() * 100),

                country: "Pakistan",

                continent: "Asia",

                language: "en-pk",

                mobile: createRandomPhoneNumber(),

                landline: createRandomPhoneNumber()

            });

        }


        this.rowData = rowData;

    }


    private createColumnDefs() {

        this.columnDefs = [
            {
                headerName: "#",
                width: 30,
                checkboxSelection: true,
                suppressSorting: true,

                suppressMenu: true,
                pinned: true

            },
            {
                headerName: "Employee",

                children: [
                    {
                        headerName: "Name",
                        field: "name",

                        width: 150,
                        pinned: true

                    },
                    {
                        headerName: "Country",
                        field: "country",
                        width: 150,

                        cellRenderer: countryCellRenderer,
                        pinned: true,

                        filterParams: { cellRenderer: countryCellRenderer, cellHeight: 20 }

                    },
                ]

            },
            {
                headerName: "IT Skills",

                children: [
                    {
                        headerName: "Skills",

                        width: 125,

                        suppressSorting: true,

                        cellRenderer: skillsCellRenderer,

                        filter: ""

                    },
                    {
                        headerName: "Proficiency",

                        field: "proficiency",

                        width: 120,

                        cellRenderer: percentCellRenderer,

                        filter: ""

                    },
                ]

            },
            {
                headerName: "Contact",

                children: [
                    { headerName: "Mobile", field: "mobile", width: 150, filter: "text" },
                    { headerName: "Land-line", field: "landline", width: 150, filter: "text" },
                    { headerName: "Address", field: "address", width: 500, filter: "text" }
                ]

            }
        ];

    }

这是html:

<ag-grid-ng2 #agGrid enable-sorting="true" enable-filter="true" row-height="22" row-selection="multiple" [columnDefs]="columnDefs" [showToolPanel]="showToolPanel" [rowData]="rowData"
 (cell-clicked)="onCellClicked($event)" (column-resized)="onColumnEvent($event)"  class="ag-fresh" 
 >
   </ag-grid-ng2>

我检查了页面，这是它的屏幕截图

这是控制台错误，但这与 ag-grid 无关

现在我不知道为什么网格没有显示。提前致谢。

Answer 1

几个小时后，我才知道真正的问题所在。每件事都很完美。实际问题是 ag-grid 宽度。默认情况下为 0px。我只是设置它的宽度，它工作正常。

Answer 2

由于 ag-grid.css (ng-version="10.1.6") -

，网格未显示或显示

.ag-root-wrapper-body.ag-layout-normal {
    height: 0;
}

CSS 修改于 styles.css

.ag-root-wrapper-body.ag-layout-normal {
    height: auto;
}

angular 2 没有显示 Ag-Grid？

Ag-Grid is not showing with angular 2?

ag-grid

angular