您如何在农业网格模块中使用多个组件？

如何解决您如何在农业网格模块中使用多个组件？

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

与本教程所示的仅在应用程序模块中导入导入AgGridModule的教程相反，

 import { AgGridModule } from 'ag-grid-angular';

然后像这样将数据放入应用程序组件中……

 columnDefs = [
        { field: 'make',sortable: true},{ field: 'model',{ 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 }
];
rowData = [
    { make: 'Toyota',];

然后在TrucksComponent中...

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

  rowData = [
    { make: 'Chevy',model: 'Silverado',price: 38000 },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.

解决方法

当你说

 AgGridModule.withComponents([CarsComponent,TrucksComponent])

这意味着这些组件将在 BY ag-grid中使用； cellRenderer，编辑器组件，过滤器组件等。

如果您想使用CarsComponent或TrucksComponent的{{3}} WITHIN ，则无需声明它们与AgGridModule.withComponents。