当角度没有输入时如何将值设置为0

Question

如何根据date 分离数据并显示PRN 子级，例如january，那么如果有machine 1 的数据，则有assetCode: PRN，它将显示在子级标题上，然后如果有另一个machine 2 然后有assetCode: PRN1 它将显示该值，它将添加到january 孩子。那么如果machine 1 没有assetCode: PRN1 那么它将设置为0，与machine 2 相同

代码如下：

list.component.ts

rowData = [
{
      code: "Machine 1",
      assetCode: "PRN",
      assetCount: 1,
      date: "2019-01-18 00:00:00"
    },
    {
      code: "Machine 1",
      assetCode: "PRN",
      assetCount: 1,
      date: "2019-01-19 00:00:00"
    },
    {
      code: "Machine 2",
      assetCode: "PRN 1",
      assetCount: 3,
      date: "2019-01-20 00:00:00"
    },
    {
      code: "Machine 3",
      assetCode: "PRN",
      assetCount: 1,
      date: "2019-01-21 00:00:00"
    },
    {
      code: "Machine 4",
      assetCode: "PRN 1",
      assetCount: 3,
      date: "2019-01-22 00:00:00"
    },
    {
      code: "Machine 5",
      assetCode: "PRN 1",
      assetCount: 3,
      date: "2019-01-23 00:00:00"
    }
];
this.columnDefs.push(
      {
        'headerName': 'Style/Machine',
        'field': 'code',
        'pinned': 'left',
        'lockPosition': true
      }
    );

    for (let i = 0; i < 12; i++) {

      const record = {
        'headerName': this.monthNames[i].monthName,
        'children': [
          {
            'headerName': 'Total',
            'columnGroupShow': 'closed'
             'field': 'total'
          }
        ]
      };

record.children.push(
          {
            'headerName': 'PRN',
            'columnGroupShow': 'open'
             'field': 'assetCount'
          }
);
this.columnDefs.push(record);
}

如何做到这一点。

Answer 1

分析您包含在问题中的代码和数据，它似乎无法奇迹般地协同工作。 两者都需要稍作更改才能生成您想要的网格。

在代码中，您使用“列组”来构造显示，但是您的网格标题“PRN,...,PRNX”强烈基于数据对象 属性 'assetCode' 和 'assetCount' - 这就是为什么更简单的方法是将 ag-grid 'Pivoting' 作为给定问题的解决方案。

透视允许您获取列值并将它们转换为列。

1. 首先，我们需要为所有“Machines X”行定义结构：

{
  code: "Machine X",
  PRN:  1,
  PRN1: 5,
  PRN2: 7,
  ...
  PRNX: XX,
  month: "January"
},{
  code: "Machine X",
  PRN:  1,
  PRN1: 3,
  ...
  PRNX: XX,
  month: "February"
},

1. 第二步包括设置应计算的列总数的配置（PRN 标头将在后面的步骤中与数据转换一起创建）：

var gridOptions = {
    ...
    //Switched to true to b 'Pivot' feature
    pivotMode: true, 
    //Switched to true, so headers won't include the aggFunc, eg 'sum(PRN)'
    suppressAggFuncInHeader: true,
    //Additional properties to define how your groups are displayed
    autoGroupColumnDef: {
        headerName: "Style/Machine", 
        field: "code", 
        width: 200,
        cellRendererParams:{
          suppressCount: true,
        },
    },
    //Helps display & ordering by name of pivot headers
    processSecondaryColGroupDef: function(colGroupDef) {
      var res = colGroupDef.headerName.split("_");
      var month = monthNames[res[0]];
      colGroupDef.headerName = month+'\''+res[1];
    },
    columnDefs: columnDefs,
    rowData: null
};

分组的主标题：

{ headerName: "Code",  field: "code", rowGroup: true}

要按“月”列对行进行透视，请定义“pivot: true”：

 { headerName: "Month", field: "month", pivot: true},

1. 在下一步中，转换您的输入数据以适应第 1 步中的结构：

//Group the data per month/year for each 'Machine X'
var dataByMonthYear = rowData.reduce(function(dataByMonthYear, datum){
  var date  = new Date(datum.date);
  var year  = ('' + date.getFullYear()).slice(-2);
  
  //Index helps to aggregate the values by unique 'Machine_month_data' code
  var index = datum.code+'_'+date.getMonth() + '_' + year;
  
  //Init new entry
  if(!dataByMonthYear[index]){
     dataByMonthYear[index] = {code: datum.code, month: date.getMonth() + '_' + year};
  }
  if(!dataByMonthYear[index][datum.assetCode]){
     dataByMonthYear[index][datum.assetCode] = 0;
  }

  //Sum total by assetCode
  dataByMonthYear[index][datum.assetCode] += datum.assetCount;

  //Add PRN code to list (for later headers init)
  if(columns.indexOf(datum.assetCode) === -1){
     columns.push(datum.assetCode);
  }

  return dataByMonthYear;
}, {});

//Build final data - object to array
var finalRowData = Object.keys(dataByMonthYear).map(function(group){
  return dataByMonthYear[group];
});

4. 最后要做的是设置列

//Global structure of PRN header:
{ 
    headerName: "PRN", field: "PRN", 
    //Custom aggregate function, replacing default aggFunc: 'sum',
    //to handle 0 values for not present attributes
    aggFunc: customAggFunction
},

以及负责计数&列定义的主要功能：

function customAggFunction(values) {
   var sum = 0;
   values.forEach( function(value) {
        if (typeof value === 'number') {
            sum += value;
        }
    });
    return sum;
}

//Define PRN columns 
columns.map(function(col){
  columnDefs.push({ headerName: col, field: col, aggFunc: customAggFunction
     });
});

请注意，另一种解决方案是使用完整组而不是旋转，但是我们需要为每个 YEAR_MONTH_PRN 定义一个列以显示所有值、处理过滤和排序等（用于显示几年有很多 PRN 的这个解决方案是 slghtly 重那么）。

Working example

比赛结束后：

“如果在三月有 PRN 1，它将显示，但如果在三月没有 PRN，它应该显示。”

第二个解决方案与您更相关，因为数据透视列是共享的，您需要的是完全访问列定义以显示/隐藏 他们关于给定时期的总价值。这意味着我们需要在您的源数据中创建与 accessCodes 一样多的列。

请注意，原始数据中没有 accessCode 的行将分配值并将其设置为 0 - 为此，我们需要映射数据源中存在的“资产代码/月/年”的所有可能列，然后创建它们用于每一行（这将避免缺少列的空白值）。

请注意，第二种解决方案不是最佳解决方案，因为需要两次遍历数据 - 一次映射所有列，第二次为每一行分配值。如果有办法从服务器端获取期间列表（'assetCode/month/year'），那将改进代码。

Working example v2