Question

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

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>

如上所示，我可以很好地编写代码。我遇到的问题是我不知道如何从列到行解析数据。＆＃34; tagName＆＃34;财产并不总是一样的。有时会有10个不同的标签名称。

感谢任何帮助。

Answer 1

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

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

列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

Answer 2

这就是我最终让它发挥作用的方式。这是非常快的，但我确信我不是最有效的方式。会赞赏建设性的批评。

  <security mode="Transport">
    <transport clientCredentialType="Certificate" />
  </security>

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

2 个答案: