Question

我是角度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））：

<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 ]),

关于我正在使用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。我只是设置它的宽度，它工作正常。

Ag-Grid没有显示角度2？

1 个答案: