javascript - Angular 没有输入时如何将值设置为0

Question

如何根据 date 分离数据并显示 PRN 子级，例如 january 那么如果有一个数据是 machine 1 然后有 assetCode: PRN 它将显示在子标题上，然后如果有另一个 machine 2 然后有 它将显示值assetCode: PRN1 它将在 1 月 子级添加。那么如果machine 1没有assetCode: PRN1那么它会设置为0，和machine 2一样/p>

代码如下:

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' 视为给定问题的解决方案。

Pivoting allows you to take a columns values and turn them into columns.

1. 首先，我们需要为所有“机器 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 header 将在后续步骤中与数据转换一起创建):

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];
});

1. 最后要做的是设置列

//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 的几年，这个解决方案会稍微重一些)。

Working example

After the comments:

"if in month of march there's PRN 1 it will display, but if there's no PRN in month of march it should display."

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

请注意，原始数据中没有 accessCode 的行将分配值并设置为 0 - 为此，我们需要映射中存在的“assetCode/month/year”的所有可能列然后数据源为每一行创建它们(这将避免缺失列的空白值)。

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

Working example v2