javascript - 广告网格显示不佳

Question

我有一个 Angular 4 项目，基于 this starter .

我正在尝试嵌入 ag-grid在我的项目中。

第一步我按照these instructions使用 ag-grid 创建一个新的示例项目。它运行良好，看起来像这样:

然后，我尝试将其嵌入到我的项目中，但现在看起来像这样:

我没有看到两个项目之间的相关代码有任何区别，除了我从真实项目中删除了“红色组件”内容(但从示例项目中删除它不会破坏 UI)。

<div style="width: 200px;">
      <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
                       [gridOptions]="gridOptions">
      </ag-grid-angular>
    </div>


constructor(
  ) {
    this.gridOptions = {};
    this.gridOptions.columnDefs = [
      {
        headerName: "ID",
        field: "id",
        width: 100
      },
      {
        headerName: "Value",
        field: "value",
        width: 100
      },

    ];
    this.gridOptions.rowData = [
      {id: 5, value: 10},
      {id: 10, value: 15},
      {id: 15, value: 20}
    ]
  }

我尝试删除 Bootstrap ，但它没有改变任何东西。

我不知道如何解决或调查它，任何帮助将不胜感激。如果您需要任何进一步的信息，请告诉我。

Answer 1

我会留下这两个答案，以防它对任何人有帮助。

Angular 启动器

Github Readme表示您需要 src/styles 文件夹中的一个文件，您可以在其中 @import 其他样式。然后，您需要在 app.module.ts 文件中导入此文件。请注意，您可能必须重新启动 npm run server。

Angular CLI

将以下内容添加到 angular-cli.json:

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

记得重新启动 ng-serve 添加样式后。