Angular Ag网格未以角度2显示？
我是angular 2的新手，正在尝试配置ag网格。控制台上有一些关于ag网格的错误。我已经解决了。现在控制台上除了一个错误外没有其他错误，但它与ag网格无关。但网格仍然没有显示出来。 代码如下： 在Package.json中添加：Angular Ag网格未以角度2显示？,angular,ag-grid,Angular,Ag Grid,我是angular 2的新手，正在尝试配置ag网格。控制台上有一些关于ag网格的错误。我已经解决了。现在控制台上除了一个错误外没有其他错误，但它与ag网格无关。但网格仍然没有显示出来。 代码如下： 在Package.json中添加： "ag-grid": "^7.1.0", "ag-grid-ng2": "^7.1.2", "ag-grid-enterprise": "^7.1.0" 在布局中添加CSS（使用带.net核心（MVC）的angular 2）： 关于是我使用ag g
"ag-grid": "^7.1.0",
"ag-grid-ng2": "^7.1.2",
"ag-grid-enterprise": "^7.1.0"
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" }
]
}
];
}
以下是关于组件：
从“@angular/core”导入{Component，OnInit}；
从“@angular/router”导入{Routes，RouterModule}；
导入PageService=require（“../../services/page.service”）；
从“ag-grid-ng2/main”导入{AgGridModule}；
从“ag grid/main”导入{GridOptions}；
@组成部分({
//不需要选择器，因为它将通过路由加载
templateUrl:“/page/index”
})
导出类PageComponent实现OnInit{
私人网页；
私有网格选项：网格选项；
公共显示网格：布尔；
公共数据：任何[]；
私人专栏：任何[]；
公共行数：字符串；
构造函数（专用pageService:pageService.pageService）{
//我们传入一个空的gridOptions，这样就可以获取api
this.gridOptions={}；
这是createRowData（）；
这个.createColumnDefs（）；
this.showGrid=true；
}
ngOnInit（）：void{
//this.pages=this.pageService.getAll（）.subscribe（pages=>this.pages=pages.Content）；
}
私有createRowData（）{
常量行数据：任意[]=[]；
for（设i=0；i<10000；i++）{
const countryData=[]；
rowData.push({
名称：“泽山穆尼尔”，
技能：{
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
},
地址：“拉合尔”，
年份：Math.round（Math.random（）*100），
熟练程度：数学四舍五入（数学随机（）*100），
国家：“巴基斯坦”，
大陆：“亚洲”，
语言：“en pk”，
手机：createRandomPhoneNumber（），
固定电话：createRandomPhoneNumber（）
});
}
this.rowData=rowData；
}
私有createColumnDefs（）{
this.columnDefs=[
{
标题名称：“#”，
宽度：30，
复选框选择：true，
对,，
是的，
是的
},
{
头名：“员工”，
儿童：[
{
头名：“姓名”，
字段：“名称”，
宽度：150，
是的
},
{
头名：“国家”，
字段：“国家”，
宽度：150，
cellRenderer:countryCellRenderer，
对,，
filterParams:{cellRenderer:countryCellRenderer，cellHeight:20}
},
]
},
{
headerName：“IT技能”，
儿童：[
{
头名：“技能”，
宽度：125，
对,，
cellRenderer:skillsCellRenderer，
过滤器：“
},
{
校长姓名：“精通”，
字段：“熟练程度”，
宽度：120，
cellRenderer:percentCellRenderer，
过滤器：“
},
]
},
{
头名：“联系人”，
儿童：[
{标题名称：“移动”，字段：“移动”，宽度：150，过滤器：“文本”}，
{标题名称：“陆地线”，字段：“陆地线”，宽度：150，过滤器：“文本”}，
{标题名称：“地址”，字段：“地址”，宽度：500，过滤器：“文本”}
]
}
];
}
<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网格无关
现在我不知道为什么网格没有显示。提前谢谢。几个小时后，我知道了实际问题。一切都很完美。实际问题是ag网格宽度。默认情况下它是0px。我只是设置了它的宽度，它工作得很好。可能会帮你找到正确的方向…看起来角度可能有些问题在开发模式下，10000行试图渲染到ng reflect行数据的DOM中。请务必了解davidagee在该线程中所说的内容谢谢您的回复。我不知道ng reflect，但问题不在于ng reflect。实际上网格在DOM上渲染，但默认宽度为0px。我只是设置了它。而且它显示得非常完美。我有一个类似的问题，但在我的情况下，高度默认为0px，因此请确保您也设置了高度。也有类似的问题。在我的情况下，高度和宽度过去设置为100%（高度：100%）.TS新手；显然这不起作用…顺便说一句，即使Chrome dev console>元素在页面上突出显示网格应该占据的适当空间…在我的情况下，将高度设置为100%也可能会导致表单消失。尝试100vh
您还可以将选项domLayout
设置为'autoHeight'
设置为au自动为元素提供所需的空间（容器内无垂直滚动）。
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" }
]
}
];
}
<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>