ag-grid 在 Angular 应用程序中不可见

Question

我正在不同的第三方网格上进行研发，这些网格具有可用的主从功能。

我已经按照 Ag-Grid 网站的步骤来呈现具有可扩展的主从网格的 ag-grid。

但是当应用程序被渲染时，我只看到一个空白组件。

控制台也没有错误。

这是我的html

<div><p>ag-hierarchy-grid works!</p></div>
<div>
    <ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [masterDetail]="true"
    [detailCellRendererParams]="detailCellRendererParams"
    [rowData]="rowData"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>

这是我的组件代码

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
  ColDef,
  FirstDataRenderedEvent,
  GridReadyEvent,
  IDetailCellRendererParams,
} from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { IDocument, ITransaction } from './interfaces';


@Component({
  selector: 'app-ag-hierarchy-grid',
  templateUrl: './ag-hierarchy-grid.component.html',
  styleUrls: ['./ag-hierarchy-grid.component.scss']
})
export class AgHierarchyGridComponent implements OnInit {
  public columnDefs: ColDef[] = [
    // group cell renderer needed for expand / collapse icons
    { field: 'TransactionID' , cellRenderer: 'agGroupCellRenderer', hide: true },
    { field: 'Engagement',headerName: 'Engagement' },
    { field: 'DateAndTime',headerName: 'Date & Time of Request'  },
    { field: 'Service' ,headerName: 'Service' },
    { field: 'GroupSSL',headerName: 'Group/SSL' },
    { field: 'Types',headerName: 'Types(Forms)' },
    { field: 'ExtractionStatus',headerName: 'Overall Extraction Status' },
    { field: 'QCStatus',headerName: 'Quality Check Status' },
    { field: 'QCAnalyst',headerName: 'Quality Analyst' },
    { field: 'ParentDownloadAction',headerName: 'Action' }
  ];
  public defaultColDef: ColDef = {
    flex: 1,
  };
  public detailCellRendererParams: any = {
    detailGridOptions: {
      columnDefs: [
        { field: 'TransactionID' , hide: true },
        { field: 'DocName' ,headerName: 'Document Name' },
        { field: 'ExtractionStatus' ,headerName: 'Data Extraction Status' },
        { field: 'ChildDownloadAction',headerName: 'Action' }
        
      ],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: (params) => {
      params.successCallback(params.data.documents);
    },
  } as IDetailCellRendererParams<ITransaction, IDocument>;
  public rowData!: ITransaction[];
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
  }
 

  onGridReady(params: GridReadyEvent<ITransaction>) {
    this.http
      .get<ITransaction[]>(
        'http://localhost:4200//src//assets//data.json'
      )
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

有人能指出我可能缺少的东西吗？

Answer 1

我有一个类似的问题，原因是表格的高度为 0。所以试试这个 css，看看问题是否解决了。如果解决了，请将其设置为您想要的高度。

.ag-theme-alpine {
  min-height: 500px;
  height: 500px;
}

提示：您可以检查元素并检查表格是否实际呈现在屏幕中但由于高度为 0 而不可见。

Answer 2

在 Visual Studios 中，我去了@import 'ag-grid-community/styles/ag-grid.css'； @import 'ag-grid-community/styles/ag-theme-alpine.css' in node_modules Right Click/Properties 我把它改成“Copy Always”