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

如何分隔数据并基于PRN显示date子级，例如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);
}

如何做到这一点。

最佳答案

分析您随附的问题的代码和数据，似乎无法奇迹般地一起工作。
两者都需要稍作更改才能生成所需的网格。

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


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



首先，我们需要为所有“机械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"
},

第二步包括为要计算的列总数设置配置（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中的结构：

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

最后要做的是设置列

//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


  评论后：
  
  “如果在3月份显示PRN 1，则应显示，但如果在3月份没有PRN，则应显示。


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

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

请注意，第二种解决方案不是最佳解决方案，因为需要两次处理数据-一次映射所有列，第二次为每一行分配值。如果可以从服务器端获取时段列表（“ assetCode / month / year”），则可以改进代码。

Working example v2

关于javascript - 没有 Angular 输入时如何将值设置为0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59148905/