샘플 ag-grid 예제를 복사하고 서로 위에 셀 렌더링을 사용하십시오.

Question

ag-grid로 실험 중이며 아주 간단한 예제가 작동하려고합니다. 지금까지 나는 운이별로 없다.

ng new gridTest을 사용하여 새로운 앱을 만들었으며 these 지침을 따르려고했습니다.

내가 만든 샘플 사이트는 here입니다.

내 결과 그리드는 다음과 같습니다

app.component.html :

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh" 
[rowData]="rowData" 
[columnDefs]="columnDefs"> 
</ag-grid-angular> 

app.component.ts :

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 

    public rowData = [ 
    { make: "Toyota", model: "Celica", price: 35000 }, 
    { make: "Ford", model: "Mondeo", price: 32000 }, 
    { make: "Porsche", model: "Boxter", price: 72000 } 
    ] 

    public columnDefs = [ 
    { headerName: "Make", field: "make" }, 
    { headerName: "Model", field: "model" }, 
    { headerName: "Price", field: "price" } 
    ] 
} 

app.module. ts :

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 

import { AgGridModule } from 'ag-grid-angular/main'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AgGridModule.withComponents([]) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

내가 뭘 잘못하고 있니? 나는이 아주 간단한 예제로 스타일이나 다른 것을 엉망으로 만든 것을 볼 수 없다 ...

Answer 1

여기서 문제는 대부분 스타일과 관련이있다. 고정 앱은 here으로 볼 수 있습니다.

나는 각-cli.json 파일에 올바른 AG-그리드 스타일을 추가했다 그리드 활용하려면 다음

"styles": [ 
    "../node_modules/ag-grid/dist/styles/ag-grid.css", 
    "../node_modules/ag-grid/dist/styles/theme-fresh.css" 
    ] 

내가 올바른 스타일 이름을 가리 키도록 그리드 사업부를 변경했다 :

를

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh" 
[rowData]="rowData" 
[columnDefs]="columnDefs" 
(gridReady)="onGridReady($event)"> 
</ag-grid-angular> 

및 핸들러 :

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh" 
[rowData]="rowData" 
[columnDefs]="columnDefs" 
</ag-grid-angular> 

과 열이 잘 표시 갈 수있는 나는 이벤트 리스너를 추가했다 :

public onGridReady(params: any){ 
    params.api.sizeColumnsToFit(); 
    } 

ag-grid 문서는 대부분 git-hub repo를 복제하여 실행하는 것에 의존합니다. 내가 일하는 곳에서는 github에 액세스 할 수 없으며 npm에 대한 액세스가 제한되어 있으므로 기존 프로젝트에 그리드를 추가해야했습니다. 이 접근법을 취할 때 수행해야 할 단계가있는 문서는 없습니다.