关键词：
【中文标题】您如何在 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 组件。如何在 React 函数组件（useState 挂钩）中访问 ag-Grid API？
】如何在React函数组件（useState挂钩）中访问ag-GridAPI？【英文标题】：Howtoaccessag-GridAPIinReactfunctioncomponent(useStatehook)?【发布时间】：2020-05-2317:41:37【问题描述】：在React函数组件中访问ag-GridAPI的最佳方式是什么？我必须使用API中... 查看详情
Ag-grid 中的模态
】Ag-grid中的模态【英文标题】：ModalinAg-grid【发布时间】：2019-10-2115:18:28【问题描述】：如何在ag-gridreact中单击按钮时打开模式对话框。在我的例子中，这个模态框是一个反应组件。所以基本上，我必须使用ag-grid在按钮单击时... 查看详情
如何在 Ag-Grid 中隐藏单元格渲染组件中的按钮？
】如何在Ag-Grid中隐藏单元格渲染组件中的按钮？【英文标题】：HowdoIhideabuttonfromcellrenderedcomponentinAg-Grid?【发布时间】：2019-01-0210:45:55【问题描述】：我在mcomponent中有一个按钮列表，用于在网格中显示它以在网格上执行操作。我... 查看详情
如何将数组列表传回ag-grid（Vue）中的父组件
】如何将数组列表传回ag-grid（Vue）中的父组件【英文标题】：Howtopassbackanarraylistbacktoparentcomponentinag-grid(Vue)【发布时间】：2022-01-0909:52:29【问题描述】：我正在vue中使用AG网格。我有一个要求，我有两个使用cellRendererFramework呈现... 查看详情
如何在使用“inRange”过滤器类型的 ag-grid 中创建自定义浮动过滤器组件
】如何在使用“inRange”过滤器类型的ag-grid中创建自定义浮动过滤器组件【英文标题】：Howtocreatecustomfloatingfiltercomponentinag-gridthatuses"inRange"filtertype【发布时间】：2020-08-0700:17:16【问题描述】：我正在尝试构建一个自定义... 查看详情
如何在我的 ag-grid 单元格中放置一个 react jsx 组件
】如何在我的ag-grid单元格中放置一个reactjsx组件【英文标题】：HowdoIputareactjsxcomponentwithinmyag-gridcells【发布时间】：2021-04-0707:28:24【问题描述】：不幸的是，我不能共享代码，因为它是公司机密，但我基本上使用colDefs在Reactag-grid... 查看详情
Angular 4 如何在兄弟模块组件中使用其他模块组件
】Angular4如何在兄弟模块组件中使用其他模块组件【英文标题】：Angular4HowdoIuseanothermodulescomponentsinasiblingmodulescomponent【发布时间】：2018-08-0418:04:19【问题描述】：所以只是一点背景，我正在使用Angular4和AngularCli。以下是我的文件... 查看详情
Angular - 跨多个模块使用组件
】Angular-跨多个模块使用组件【英文标题】：Angular-Usingacomponentacrossmultiplemodules【发布时间】：2018-04-2813:06:10【问题描述】：我正在使用什么角度我要做什么我有一个加载组件想要跨多个模块重用我做了什么我创建了一个名为“lo... 查看详情
将组件、指令和管道公开并在模块外使用
...eoutsideamodule【发布时间】：2018-02-0421:07:24【问题描述】：如何公开组件、指令和管道？这是因为当我将它们添加到模块中的声明数组时，它们在声明它们的模块中的任何地方都可见并且是模块私有的。如果我必须在模块外使用应... 查看详情
如何使用来自 Nuxt 内容模块的数据的组件
】如何使用来自Nuxt内容模块的数据的组件【英文标题】：HowdoyouusecomponentswithdatafromNuxtContentModule【发布时间】：2021-04-3015:05:57【问题描述】：具有隐藏输入字段的组件应该具有当前页面标题的值。在Nuxt中，您可以对所有页面使... 查看详情
如何在 Angular 的单元测试中模拟 AG-grid 的节点？
】如何在Angular的单元测试中模拟AG-grid的节点？【英文标题】：HowtomocknodesforAG-gridinunittestforAngular?【发布时间】：2021-12-1605:12:46【问题描述】：有没有办法在单元测试中模拟AG-grid的节点？组件没有agInit。而且我还没有看到任何模... 查看详情
如何跳过应用到 ag-grid 组件的具体化 css 文件
】如何跳过应用到ag-grid组件的具体化css文件【英文标题】：Howtoskipmaterializecssfilegettingappliedtoag-gridcomponents【发布时间】：2021-02-0119:38:35【问题描述】：我有一个.cshtml文件，其中包含search/upload/download/save按钮，这些按钮使用materia... 查看详情
如何在另一个模块/路由器中使用组件
】如何在另一个模块/路由器中使用组件【英文标题】：Howtousecomponentinainanothermodule/router【发布时间】：2018-08-0814:14:10【问题描述】：我正在尝试使用另一个模块中的另一个组件，但它在我的路由器插座中不起作用。app.moduleimportB... 查看详情
如何在组件中显示 Joomla 模块？
】如何在组件中显示Joomla模块？【英文标题】：HowcanIdisplayJoomlamoduleswithinacomponent?【发布时间】：2011-05-0122:45:09【问题描述】：我有一个包含多个游戏类别的组件，我想根据类别显示不同的横幅。我需要可自定义横幅（和链接）... 查看详情
如何在 ag-grid 中为 Angular 2 进行分页
】如何在ag-grid中为Angular2进行分页【英文标题】：howtodopaginationinag-gridforangular2【发布时间】：2017-03-1903:46:18【问题描述】：我正在使用ag-grid在angular2中开发一个带有分页组件的网格，已经在html中尝试了以下代码。[gridOptions]="grid... 查看详情
如何在 ag-grid 中的单元格中使用和添加图标以指示该单元格是可编辑的
】如何在ag-grid中的单元格中使用和添加图标以指示该单元格是可编辑的【英文标题】：Howtouseandaddicontoacellinag-gridtoindicatethecelliseditable【发布时间】：2019-02-2707:48:01【问题描述】：我正在使用角度为6的ag-grid。对于特定列，单元... 查看详情
ReactJs - 如何在一个组件中使用多个子组件
】ReactJs-如何在一个组件中使用多个子组件【英文标题】：ReactJs-howtousemultiplechildreninacomponent【发布时间】：2020-03-0623:28:59【问题描述】：我以我对ReactJs非常陌生，并且可能试图解决一些非常基本的事情作为开头。我有一段带有... 查看详情
Ag-Grid：如何获得焦点单元格值
】Ag-Grid：如何获得焦点单元格值【英文标题】：Ag-Grid:Howtogetthefocusedcellvalue【发布时间】：2018-12-2509:34:38【问题描述】：如何使用键盘方向键在关注单元格时获取关注的单元格值【问题讨论】：【参考方案1】：您可以使用获得... 查看详情