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

Question

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

与教程相反，它显示仅在应用程序模块中导入 import 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应用页面，并放入需要的属性。

我是 wondering/hoping 这可以通过应用程序模块中的某些东西来完成，如下所示：

  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.

Answer 1

当你说

 AgGridModule.withComponents([CarsComponent, TrucksComponent])

表示这些组件将被使用BY ag-grid;作为 cellRenderer、编辑器组件、过滤器组件等

如果您想在 ag-grid 您的 CarsComponent 或 TrucksComponent 中使用，则你不需要用 AgGridModule.withComponents.

声明它们

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

how do you use multiple components in an ag-grid module?

ag-grid

ag-grid-ng2

angular

ag-grid-angular