Javascript 如何以ag栅格角度显示对象

数据不显示。 代码如下：

列表.组件.ts

setAgGrid（）{
this.data.map（（数据：any）=>{
const date=新日期（data.date）；
const year=（''+date.getFullYear（））.slice（-2）；
const assetclindex=data.assetCode+'\'+date.getMonth（）+'\'+year；
if（this.columns.indexOf（AssetClindex）=-1）{
this.columns.push（AssetClindex）；
}
});
const dataByMonthYr=this.data.reduce（（dataByMonthYear:any，datum:any）=>{
施工日期=新日期（基准日期）；
const year=（''+date.getFullYear（））.slice（-2）；
const monthYear=this.monthNames[date.getMonth（）].monthName+'\''+年；
const AssetClindex=datum.assetCode+''\'+date.getMonth（）+'\'+year；
让dataIndex=dataByMonthYear.findIndex（（数据：any）=>data.code==datum.code）；
如果（数据索引==-1）{
dataByMonthYear.push（{code:datum.code}）；
dataIndex=dataByMonthYear.length-1；
}
让计数=0；
this.columns.forEach（（列：any）=>{
计数=列===AssetClindex？数据。assetCount:0；
dataByMonthYear[dataIndex][column]=（dataByMonthYear[dataIndex][column]| | 0）+计数；
});
const colHeaderIndex=this.columnDefs.findIndex（（数据：any）=>data.headerName==monthYear）；
如果（colHeaderIndex！=-1）{
const colIndex=this.columnDefs[colHeaderIndex]
.children.findIndex（（数据：any）=>data.field==AssetClindex）；
如果（colIndex==-1）{
this.columnDefs[colHeaderIndex].children.push(
{
“headerName”：datum.assetCode，
“字段”：AssetClindex，
“aggFunc”：this.customAggFunction
}
);
}否则{
这是推({
校长姓名：月日，
代码：date.getMonth（）+'\'+年，
儿童：[
//{headerName:“样式/机器”，字段：}，
{headerName:datum.assetCode，字段：assetclindex，宽度：100，aggFunc:this.customAggFunction}，
]
});
}
}
第1年返回数据；
}, []);
this.columnDefs.sort（（a:any，b:any）=>{
如果（a.code

如何在ag网格中显示对象

我想展示的是这样的。

当我添加

this.gridOptions.gridApi.setRowData（对象）

gridApi无法识别或setRowData无法识别。 预期产量。

---

提前感谢。

您需要在rowdata对象中设置对象 [rowData]=“rowData” 打字 文件行数据=对象

或者使用setRowdata对象 this.gridApi.setRowData（对象）

为了根据需要显示单元格， 使用cellRenderer

---

关于为什么GridApi未定义的答案：

您的

GridApi

未定义，因为它未初始化

将

gridReady

事件添加到模板中，如下所示：

(gridReady)="onGridReady($event)"

在您的组件中：

onGridReady(event){
 this.gridApi = event.api;
 this.setAgGrid();
}

关于数据未显示原因的回答：

如图所示： 您的

columndef

和

rowData

不同步，并且与要显示的内容无关

您的

columnDefs

只有一个对象的

字段

值为“code”

添加您想要作为列的其他字段

在“rowData”键中，对象的名称应与

字段的
名称相匹配

您不需要调用
setAgGrid
两次，您可以将其从
ngOnInit
中删除

注：如果您在
列defs
中将
隐藏
从
假
更改为
真
，您将开始看到您的代码列。您不需要使用
BehaviorSubject
，只需将数组分配给
rowData
代码中存在许多问题，一些语法错误和一些逻辑错误。我试着用从阅读代码中获得的基本理解来修复它

在ag网格初始化后，使用ag网格的
gridReady
事件调用
setAgGrid（）
方法，如下所示：

(gridReady)="onGridReady($event)"

在组件文件中，删除OnInit方法并声明一个新函数

onGridReady(event){
 this.gridApi = event.api;
 this.setAgGrid();
}

在
setAgGrid（）
方法中也可以这样更改这些行（我添加了一个新的行代码，并在这里编辑了另一行）

将代码中的if条件替换为下面给出的条件，因为列定义没有被推送到
columnDefs
数组中，因为在两个if条件中存在else条件的混合

if (colHeaderIndex !== -1) {
        const colIndex = this.columnDefs[colHeaderIndex]
          .children.findIndex((data: any) => data.field === assetColIndex);
        if (colIndex === -1) {
          this.columnDefs[colHeaderIndex].children.push(
            {
              'headerName': datum.assetCode,
              'field': assetColIndex,
              'aggFunc': this.customAggFunction
            }
          );
        }
      } else {
        this.columnDefs.push({
          headerName: monthYear,
          code: date.getMonth() + '_' + year,
          children: [
            // { headerName: "Style/Machine", field:   },
            { headerName: datum.assetCode, field: assetColIndex, width: 100, aggFunc: this.customAggFunction },
          ]
        });
      }

我得到了与你在问题中提到的类似的结果。这里还创建了stackblitz演示-
请将代码与问题一起粘贴-这样可以确保在外部链接枯竭时问题仍然有效。我已经尝试了this.gridApi.setRowData（）。setRowData无法识别您是否声明了gridApi类型的gridApi？是，错误为无法读取未定义的属性“setRowData”。检查package.json文件中是否存在ag grid的依赖项。我应该将this.gridApi.setRowData（）放在何处？在onGridReady中，或者我可以将其添加到setGrid中？如何显示样式/机器？例如，1月份只有2台机器，即机器1有带计数2的PRN，机器2有带计数1的PRN，然后在2月份有3台机器，然后有样式/机器，即机器4、5、6和机器4有带计数3的PRN，机器5和6有带计数5的PRN 2。机器1和2不应显示在屏幕上February@ABC更改顶部声明的
columnDefs
，将hide属性设置为
false
@ABC请添加屏幕截图或示例
this.gridApi.setColumnDefs(this.columnDefs)
this.gridApi.setRowData(dataByMonthYr);

if (colHeaderIndex !== -1) {
        const colIndex = this.columnDefs[colHeaderIndex]
          .children.findIndex((data: any) => data.field === assetColIndex);
        if (colIndex === -1) {
          this.columnDefs[colHeaderIndex].children.push(
            {
              'headerName': datum.assetCode,
              'field': assetColIndex,
              'aggFunc': this.customAggFunction
            }
          );
        }
      } else {
        this.columnDefs.push({
          headerName: monthYear,
          code: date.getMonth() + '_' + year,
          children: [
            // { headerName: "Style/Machine", field:   },
            { headerName: datum.assetCode, field: assetColIndex, width: 100, aggFunc: this.customAggFunction },
          ]
        });
      }