0
私は2番目の角度で新しく、ag-gridを設定しようとしています。 ag-gridに関してコンソールに何らかのエラーがありました。私はそれを解決しました。コンソールにはエラーがありませんが、ag-gridとは関係ありません。しかし、まだグリッドは表示されません。追加Package.jsonで ：@ngModuleAg-Gridは角度2で表示されていませんか？
で<link href="~/lib/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" />
<link href="~/lib/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" />
追加日：レイアウトに追加された
"ag-grid": "^7.1.0",
"ag-grid-ng2": "^7.1.2",
"ag-grid-enterprise": "^7.1.0"
CSS（.NETコア（MVC）と角度2を使用）ここ コードであります約
AgGridModule.withComponents([AboutComponent.AboutComponent ]),
は、私はAG-グリッド
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-グリッドとは関係ありません
なぜグリッドがわからないのですか表示されていません。前もって感謝します。
[このディスカッション]（https://github.com/angular/angular/issues/9707）正しい方向に向けるのに役立つかもしれません...角度が10000のデベロッパーモードng-reflect-row-dataのDOMにレンダリングしようとしている行。 davidageeがそのスレッドで言っているものに着くようにしてください –
あなたにお返事ありがとうございます。私はng-reflectについて知りませんでしたが、問題はng-reflectについてのものではありませんでした。実際にグリッドはDOM上でレンダリングされていましたが、デフォルトでは幅は0pxでした。私はちょうどそれを設定します。そしてそれは完全に見えている。 – Umer