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

我使用以下AG网格版本

• 银-grid@17.1.1
• 银栅-angular@17.1.0

我正在关注ag网格站点本身的入门部分

我的代码如下

在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

这是版本的问题吗？我一直在努力。任何帮助都会对我很好

提前感谢。
看起来您尚未完全设置配置。我在
architect
->
build
->
选项
块中的
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"
],

在项目根目录中
style.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主题。
谢谢。将CSS导入行移动到全局样式表文件对我来说很有效。可能是重复的