广告网格显示效果不佳

Question

我有一个基于this starter的角度4项目。

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

至于第一步，我跟着these instructions创建了一个带有ag-grid的新示例项目。它运作良好，看起来像这样：

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

我没有看到两个项目之间的相关代码有任何差异，除了我从我的真实项目中删除了“红色组件”的东西（但是从示例项目中删除它不会破坏UI）。

<div class="input-group">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <span>
        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </span>
</div>

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

我不知道如何解决或调查它，任何帮助都将深受赞赏。如果您需要任何进一步的信息，请与我们联系。

Answer 1

我会留下两个答案以防万一。

Angular Starter

Github Readme表示您需要src/styles文件夹中的文件，其中@import其他样式。然后，您需要在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 。

Answer 2

在angular-cli.json文件中添加以下内容

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;