您如何在 ag-grid 模块中使用多个组件？

Posted 2023-03-28

【中文标题】您如何在 ag-grid 模块中使用多个组件？

【英文标题】：how do you use multiple components in an ag-grid module?

【发布时间】：2021-02-12 07:45:47

【问题描述】：

我正在尝试使用 ag-grid 和模块将数据集放在单独的组件上。

与教程相反，它显示仅在应用程序模块中导入导入 AgGridModule...

 import  AgGridModule  from 'ag-grid-angular';

然后像这样把数据放到app组件中……

 columnDefs = [
         field: 'make' , sortable: true,
         field: 'model' , sortable: true,
         field: 'price', sortable: true 
    ];
    rowData = [
     make: 'Toyota', model: 'Celica', price: 35000 ,
     make: 'Ford', model: 'Mondeo', price: 32000 ,
     make: 'Porsche', model: 'Boxter', price: 72000 ,
    ];

然后将标签组件放入html应用页面并放入所需的属性。

我想知道/希望这可以通过应用模块中的某些内容来完成，如下所示：

  AgGridModule.withComponents([CarsComponent, 
  TrucksComponent
  ]),

然后在每个组件中放入所需的数据，例如，在 CarsComponent 中

export class CarsComponent implements OnInit  ..../
columnDefs = [
     field: 'make' , sortable: true,
     field: 'model' , sortable: true,
     field: 'price', sortable: true 
];
rowData = [
     make: 'Toyota', model: 'Celica', price: 35000 ,
     make: 'Ford', model: 'Mondeo', price: 32000 ,
     make: 'Porsche', model: 'Boxter', price: 72000 ,
 ];

然后在 TrucksComponent ...

export class TrucksComponent implements OnInit  ..../
   columnDefs = [
     field: 'make' , sortable: true,
     field: 'model' , sortable: true,
     field: 'price', sortable: true 
    ];

  rowData = [
     make: 'Chevy', model: 'Silverado', price: 38000 ,
     make: 'Ford', model: 'F350', price: 41000 ,
     make: 'Dodge', model: 'Ram', price: 36500 
   ];

然后像这样在每个 HTML 组件文件中放置单独的 ag-gr-d 标签...

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

这可以吗？我是在正确的轨道上，还是只是假设它以这种方式工作？我在 ag-grid 网站上找不到真正清晰的文档或引用此内容的示例。

我将该信息添加到预期的 Cars 组件之一 - 组件中的 rowData 和 HTML 中的 ag-grid 模板框，并收到以下错误：

   ERROR in src/app/carsprods/carsprods.component.html:28:30 - error TS2339: Property 'rowData' does not exist on type 'CarsprodsComponent'.

28                   [rowData]="rowData"
                                ~~~~~~~
  src/app/carsprods/carsprods.component.ts:6:15
    6   templateUrl:'carsprods.component.html',
                    ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CarsprodsComponent.
src/app/carsprods/carsprods.component.html:29:33 - error TS2339: Property 'columnDefs' does not exist on type 'CarsprodsComponent'.
 [columnDefs]="columnDefs">
                                   ~~~~~~~~~~
  src/app/carsprods/carsprods.component.ts:6:15
    6   templateUrl:'carsprods.component.html',
                    ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CarsprodsComponent.

【参考方案1】：

当你说

 AgGridModule.withComponents([CarsComponent, TrucksComponent])

这意味着这些组件将被使用BY ag-grid;可以作为cellRenderer、编辑器组件、过滤器组件等。

如果你想使用ag-gridWITHIN你的CarsComponent或TrucksComponent，那么你不需要用AgGridModule.withComponents声明它们。

【讨论】：

哦，真的吗？那么您可以将 ag-grid（甚至是模块）与其他组件一起使用吗？即您可以重置每个组件中的 JSON 数组并提供给相应的 HTML 页面？我理解正确吗？

所以我将基本的 rowData 和 colDefs 数组添加到组件中，并将 Ag 网格框添加到 HTML 页面并得到此错误：我在原始帖子中添加了上述错误。

我会被诅咒的！我得到了它的工作！谢谢，帕里托什。不过，我的构造函数确实有一个问题。我想知道我是否应该在这里发布，或者创建一个与 Angular 相关的新线程，因为它似乎更倾向于 Angular 而不是 Ag-grid 组件。