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

看起来好像没有完全设置配置。我在angular.json - ＆gt;中的architect文件中有以下内容： build - ＆gt; options阻止：

"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主题。

AG网格以错误的方式显示Angular 4

1 个答案: