标签: ag-grid-angular

我一直在阅读有关新项目的 ag-grid 的“入门”教程。已完成所有步骤，但出现错误提示

ag-Grid: could not find matching row model for rowModelType clientSide
ag-Grid: Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '@ag-grid-community/client-side-row-model';

将我的所有代码与教程中提供的示例和一些 plunker 示例进行了比较，没有发现任何差异。尝试将 ClientSideRowModelModule 导入 app.module 但接口与 angular 请求的内容不匹配，因此它不起作用。我没有想法，也找不到有关如何解决它的任何信息。

app.module.ts:

    ... imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([])
  ],...

app.cpmcomponent.html:

<ag-grid-angular 
style="width: 500px; height: 500px;" 
class="ag-theme-balham"
[rowData]="rowData" 
[columnDefs]="columnDefs"
 >
</ag-grid-angular>

app.component.ts:

    ...columnDefs = [
      {headerName: 'Make', field: 'make' },
      {headerName: 'Model', field: 'model' },
      {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      { …

我在 Angular 应用程序中使用 AG Grid，自从从 v27 升级到 v28 后，我的应用程序中出现以下错误。

Error: src/app/app.module.ts:18:18 - error TS2339: Property 'withComponents' does not exist on type 'typeof AgGridModule'.

我认为这是向 AG 网格提供您自己的自定义组件时所必需的？

当我使用 Angular Cli 版本 9.1.7 和 enableIvy 构建应用程序时，我收到以下警告。我正在使用 ag-grid-community 版本 22.1.0。

警告：无法完全加载 /node_modules/ag-grid-angular/main.js 以进行源映射展平：ENOENT：没有这样的文件或目录，打开 '/node_modules/ag-grid-angular/exports.js.map

应用程序运行良好，但仍然想知道，这个问题是来自 ag-grid 方面吗？我没有检查 ag-grid 23 版本，所以这个问题可以在最新版本上解决或不出现。想法..

checkboxSelection: true在 Angular & Javascript 中，我在其中一列中使用了 Ag-Grid 。

每当单击任何行的复选框时，我都需要调用一个函数...该怎么做？再次，如何在 Ag-Grid 中选中复选框时调用函数？

正如标题所暗示的那样，我将 ag-grid 与 Angular 一起使用，并且我使用了一个实现 IServerSideDatasource 的自定义类，用于从设置为“serverSide”的 rowModelType 的 API 中获取数据。

问题是，当我将 headerCheckboxSelection 和 checkboxSelection 设置为 true 时，复选框选择出现在每一行旁边但它没有出现在标题中，而当我使用客户端行模型类型时它工作得很好。

任何人都可以帮忙吗？

我正在 ag-grid 上寻找滚动事件，我想知道滚动何时到达末尾并加载下一组行，我知道如果您设置无限滚动模式，那么 ag-grid 会调用 getRows 方法，但在我的应用程序没有立即获得下一组行，我调用服务器，服务器向客户端发送一条单独的消息，其中包含新的行集

我希望使用 ag-grid 的“服务器端”模式重新获取每个页面的数据。为此，我使 maxBlocksInCache 1 和 cacheBlockSize 等于每页的项目数。直到这里它工作正常。

现在，当我更改每页的项目数时，网格开始通过获取数据自行循环。我假设这是因为 cacheBlockSize 在重新获取行（永远不会完成）后不可更改或更改。

现在我试图将缓存作为输入而不是 agGridOption ，但它什么也没改变。

<select #paginationSelect (change)="onPageSizeChanged(paginationSelect.value)" [(ngModel)]="itemsPerPage">
    <option [value]="item">2</option>
    <option [value]="item">10</option>
</select>
<ag-grid-angular
        [gridOptions]="gridOptions"
        [cacheBlockSize]="itemsPerPage"
        style="width: 100%; height: 250px;">
</ag-grid-angular>

this.gridOptions = {
            ...
            rowModelType: 'serverSide',
            pagination: true,
            paginationPageSize: this.itemsPerPage, // itemsPerPage is a class attribute attached to a select element using ngModel.
            maxBlocksInCache: 1,
            ...
}

// function called on change of select element value representing the number of items to display per page
onPageSizeChanged(newPageSize) {
        this.gridApi.paginationSetPageSize(newPageSize);
    } …

我有一些专栏有四个字,即预交易跟进,交易后跟进,其中一些有三个字.我尝试了下面的css将文本换行到多行.

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

但列标题保持不变.我想将列标题文本包装成多行.反正有没有这样做？

注意:我可以使用包装内容cellStyle: {'white-space': 'normal'}

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

但我想包装标题.

在 ag-grid 中，在表中输入一些值时，我需要接收有关input或change事件的更新值。

但是onCellValueChanged只有在单元格失去焦点时才会触发，我无法弄清楚立即获取值的方法是什么。我唯一的限制 - 我不能添加自定义 cellEditor，它需要是网格默认值。

请问有人可以建议如何达到这种行为吗？

我正在尝试对一个包含对 gridApi 的调用的函数进行单元测试，例如this.gridApi.getSelectedRows();. 当单元测试到达这一行时，它会给出以下错误：Failed: Cannot read property 'getSelectedRows' of undefined，因为 gridApi 尚未定义。

如何从单元测试中定义 gridApi？它通常在 onGridReady 函数中定义如下：

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.sizeColumnsToFit();
  }

onGridReady是否可以从单元测试中触发？我不知道可以向它发送什么参数。有其他方法可以代替this.gridApi吗？