Ag-Grid没有显示角度2？

我是角度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(使用带有.net内核的角度2(MVC)):

在@ngModule中添加

 AgGridModule.withComponents([AboutComponent.AboutComponent ]),

关于我使用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 = {};

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

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

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