AG Grid以错误的方式显示Angular 4

Question

我正在使用以下 AG Grid 版本；

• ag-grid@17.1.1
• ag-grid-angular@17.1.0

我正在关注 ag-grid 网站本身的入门部分。

我的代码如下；

在 app.module.ts 中：

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { RouterModule } from '@angular/router';
    import { HttpClientModule } from '@angular/common/http';
    import { FormsModule } from '@angular/forms';

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

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

    @NgModule({
      declarations: [
        AppComponent
      ],

      imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        AgGridModule.withComponents([]),
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

在组件本身；

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

    @Component({
      selector: 'app-table',
      templateUrl: './app-table.component.html',
      styleUrls: [
        './adwalnut-table.component.css',
        './../../../node_modules/ag-grid/dist/styles/ag-grid.css',
        './../../../node_modules/ag-grid/dist/styles/ag-theme-balham.css'
      ]
    })
    export class AppTableComponent implements OnInit {

      columnDefs;
      rowData;

      constructor() { }

      ngOnInit() {

        this.columnDefs = [
            {headerName: 'Make', field: 'make' },
            {headerName: 'Model', field: 'model' },
            {headerName: 'Price', field: 'price'}
        ];

        this.rowData = [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxter', price: 72000 }
        ];
      }

    }

我的 HTML 是这样的；

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

现在我的输出是这样的；

现在我检查并注意到控制台中没有错误。我遵循了他们的入门指南中提供的完全相同的步骤，除了我使用的是 css 而不是 SCSS 或 SASS。

是版本问题吗？我正在尝试很长时间。任何帮助都会对我有好处。

提前致谢。

Answer 1

您似乎还没有完全设置配置。我在architect -> build -> options 块中的angular.json 文件中有以下内容：

"styles": [
  "node_modules/ag-grid/dist/styles/ag-grid.css",
  "node_modules/ag-grid/dist/styles/ag-theme-material.css",
  "src/styles.css",
  "src/ag-grid-local.scss"
],

在我的项目根目录中styles.css 文件的开头，我有：

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-material.css";

在ag-grid-local.scss，也在我项目的根目录中，我有：

// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available in the source code:
//   https://github.com/ag-grid/ag-grid/blob/master/src/styles/ag-theme-material.scss

$icons-path: '~ag-grid/src/styles/icons/';

$border-color: #0000ff;

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-material.scss';

当然，您可以改用 Balham 主题。