Angular 2将JSON对象解析为行值是列的表

Question

我有以下类作为 IEnumerable 从 API 发送：

public class LogsDto
{
    public decimal Value { get; set; }
    public DateTime Time_Stamp { get; set; }
    public string TagName { get; set; }

}

这是数据作为数组传入的 Angular 类：

export class Logs {
    value: number;
    timestamp: string;
    tagName: string;
}

样本数据会这样：

{ "value": 100, "time_Stamp": "2017-05-04T00:07:47.407", "tagName": "Tag 1" },
{ "value": 200, "time_Stamp": "2017-05-04T00:07:47.407", "tagName": "Tag 2" },
{ "value": 300, "time_Stamp": "2017-05-04T00:07:47.407", "tagName": "Tag 3" },
{ "value": 150, "time_Stamp": "2017-05-04T00:07:57.407", "tagName": "Tag 1" },
{ "value": 250, "time_Stamp": "2017-05-04T00:07:57.407", "tagName": "Tag 2" },
{ "value": 350, "time_Stamp": "2017-05-04T00:07:57.407", "tagName": "Tag 3" }

在 Angular 中，我想把它变成一个这样读取的表格：

<table>
    <th>Time_Stamp</th> <th>Tag 1</th> <th>Tag 2</th> <th>Tag 3</th>

    <td>2017-05-04T00:07:47.407</td> <td>100</td> <td>200</td> <td>300</td>

    <td>2017-05-04T00:07:45.407</td> <td>150</td> <td>250</td> <td>350</td>
</table>

如上所示，我可以很好地对其进行硬编码。我遇到的问题是我不知道如何将数据从列解析到行。 “tagName”属性并不总是相同的。有时会有 10 个不同的标签名称。

感谢任何帮助。

Answer 1

这就是我最终使它工作的方式。它非常快，但我确信我不是最有效的方式。希望有建设性的批评。

parseLogs(logs: Logs[]): void {
const ts: string[] = logs.map(data => data.time_Stamp.toString());
var timestamps = ts.filter((x, i, a) => x !== undefined && a.indexOf(x) === i);


var jsonString: string = '[';

for (var j = 0; j < timestamps.length; j++) {
  var date = new Date(timestamps[j]);
  var hours = date.getHours().toString();
  if (date.getHours() < 10)
    hours = '0' + hours;
  var minutes = date.getMinutes().toString();
  if (date.getMinutes() < 10)
    minutes = '0' + minutes;

  var dtString: string = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes();

  jsonString = jsonString + '{"Time Stamp":"' + dtString + '"';

  for (var i = 0; i < logs.length; i++) {
    if (logs[i].time_Stamp === timestamps[j])
      jsonString = jsonString + ',"' + logs[i].tagName + '":' + logs[i].value + '';
  }

  if (j === (timestamps.length - 1)) {
    console.log('j:' + j + 'logs.length:' + logs.length.toString());
    jsonString = jsonString + '}';
  } else {
    console.log('j:' + j + 'logs.length:' + logs.length.toString());
    jsonString = jsonString + '},';
  }
}

jsonString = jsonString + ']';

console.log(jsonString);

this.myLogs = JSON.parse(jsonString);

//From example shown above
this.generateColumnHeaders(this.myLogs);

Answer 2

解决此问题的一种快速方法是找到通过反射返回的对象的所有独特属性并存储它们。然后你可以渲染出一个标题，然后渲染每个对象并通过一组嵌套的 ngFors 中的列进行访问。当然，这需要顺序保持与您对列的评估相同，顺便说一句。您还需要对数据进行投影以执行诸如枢轴之类的操作。然后我们将按时间戳对数据执行分组，为此我们将 100% steal someone else's SO group by function。

控制顺序是pivot，然后是列标题eval。

列评估：

generateColumnHeaders(myObjectArray) {
this.columns = [];
for(var i = 0; i < myObjectArray.length; ++i) {
  for(var col in myObjectArray[i]) {
      if(myObjectArray[i].hasOwnProperty(col)) {
        if(this.columns.findIndex(colmn => colmn === col) === -1) {
          this.columns.push(col);
        }
      }
    }
  }
}

枢轴和其他变换：

transformArray(objectArray, accessObject) {
    return this.groupByArray(objectArray.map(obj =>
    {
      var tagNameString = obj.tagName;
      let tempObj = {};
      tempObj[accessObject.pivotColumn] = obj.time_Stamp;
      tempObj[obj.tagName] = obj.value;
      return tempObj;
    }), accessObject.pivotColumn).map(tsg => {
      let tempObj = {};
      tempObj[accessObject.pivotColumn] = tsg.time_Stamp;
      for(var i = 0; i < tsg.values.length; ++i) {
        for(var tag in tsg.values[i]) {
          if(tag.indexOf(accessObject.dynamicColumnCommon !== -1)) {
            tempObj[tag] = tsg.values[i][tag];
          }
        }
      }

      return tempObj;
    });
}

控制代码：

this.myObjectArray = this.transformArray(this.myObjectArray, { pivotColumn: "time_Stamp", dynamicColumnCommon:"Tag"});

this.generateColumnHeaders(this.myObjectArray);

模板评估：

<table>
<tr>
  <th *ngFor="let column of columns">{{column}}</th>
  </tr>
  <tr *ngFor="let obj of myObjectArray">
    <td *ngFor="let column of columns">{{obj[column]}}</td>
  </tr>
</table>

Plunker