集成到Angular模板中后，ag-grid无法渲染

Question

我已经与ag-grid成功合作了几个月。今天，我下载了这个漂亮的Angular模板：ngx-admin 我试图将一个简单的网格集成到其组件之一中：

  

form-inputs.components.ts

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

@Component({
  selector: 'ngx-form-inputs',
  styleUrls: ['./form-inputs.component.scss'],
  templateUrl: './form-inputs.component.html',
})
export class FormInputsComponent implements OnInit {

  private actionPlangridApi;
  actionPlanPartiescolumnDefs = [
    {
      headerName: "Id",
      field: "id",
      editable: true,
      width: 100
    },
    {
      headerName: "Project",
      field: "project",
      editable: true,
      width: 400
    },
    {
      headerName: "Risk ID",
      field: "riskId",
      editable: true,
      width: 300
    },
    {
      headerName: "ISO 27001",
      field: "iso27001",
      editable: true,
      width: 150
    },
    {
      headerName: "Priority",
      field: "priority",
      editable: true,
      width: 150
    },
    {
      headerName: "Project Owner",
      field: "projectOwner",
      editable: true,
      width: 150
    },
    {
      headerName: "Estimated Cost",
      field: "estimatedCost",
      editable: true,
      width: 150
    }
  ];
  actionPlanPartiesrowData = [{id:'data',project:'data',riskId:'data',iso27001:'data'}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
  defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true
  };
  ngOnInit() {}
  actionPlanPartiesonGridReady(params) {
  }
  onactionPlanPartiesCellValueChanged(params) {
  }

  public getRowHeight(params) {
    return 130;
  }

}

  

form-inputs.component.html

<!-- I have tested this with a normal  Angular project and it worked perfectly -->
ahmed
<ag-grid-angular
class="ag-theme-balham"
style="width: 100% ; height: 1000px;"
[rowData]="actionPlanPartiesrowData"
[columnDefs]="actionPlanPartiescolumnDefs"
(gridReady)="actionPlanPartiesonGridReady($event)"
[getRowHeight]="getRowHeight"
[animateRows]="true"
[defaultColDef]="defaultColDef"
>
</ag-grid-angular>

我已经安装了ag-grid-angular和ag-grid-community模块。我已经将它们导入了forms.module.ts中。我还已经在angular.json中导入了两个ag-grid主题。

  

“ node_modules / ag-grid-community / dist / styles / ag-grid.css”，                 “ node_modules / ag-grid-community / dist / styles / ag-theme-balham.css”

通常这是使网格正常工作所需要的。
但是，尽管会显示网格数据。网格不会像我以前的Angular项目中那样呈现：
在ngx-admin模板中，这就是我得到的：

任何想法为什么网格显示不正确？