如何以角度 4 将数据呈现为网格/表格答案

【问题标题】：How to render data as grid/table in angular 4如何以角度 4 将数据呈现为网格/表格
【发布时间】：2018-08-14 17:23:07
【问题描述】：

我从外部微服务接收数据，这不是标准的，它就像动态数据一样。它可能包含或不包含表格数据。它也可以在网格上方有一些元数据信息。我如何渲染或识别表格数据并渲染为网格还在网格上方添加元信息。

以下是我的示例数据

{ 

   'Line1':
    [ 
      { word: 'Welcome to Angular', x: 10, y: 18 }
    ],

   'Line2':
    [ 
      { word: 'Name', x: 10, y: 24 },
      { word: 'ID', x: 105, y: 22 } 
    ],
   'Line3':
    [
      { word: 'Michael', x: 9, y: 50 },
      { word: '213', x: 103, y: 49 } 
    ],
    'Line4':
    [ 
      { word: 'Andrew', x: 11, y: 77 },
      { word: '123[enter image description here][1]', x: 105, y: 74 } 
     ],
    'Line5':
     [ 
       { word: 'John', x: 10, y: 103 },
       { word: '323', x: 105, y: 103 } 
     ]
}

输出应该如下所示，

  Welcome to Angular

  Name      ID
  Michael   213
  Andrew    123
  John      323

我怎样才能实现上述格式。我正在为 UI 使用 Angular 4。有没有支持我的要求的网格？

注意：我正在从服务器的响应中获取单词的坐标。

【问题讨论】：

Google Array.prototype.map, Object.keys ...
我如何区分元数据和类似数据的表
在该示例中，任何具有包含两个项目的数组的属性，其中的词键是表数据。
如果我在第一个数组中有另一个不属于网格的值怎么办
如果您无法更改服务器端以使其发送有意义的内容，那么您只需要尝试了解数据客户端即可。找出规则并做出反应。

标签： javascript html node.js angular npm

【解决方案1】：

const tabularData = Object.keys(sampleData)
    .filter(key => sampleData[key].length > 1)
    .sort()
    .map(key => sampleData[key].map(item => item.word.replace(/\[.*\]/g, '')));
// -->
[
    ['Name', 'Id'],
    ['Michael', '213'],
    ...
]

const otherData = Object.keys(sampleData)
    .filter(key => sampleData[key].length === 1)
    .sort()
    .map(key => sampleData[key][0].word);
// -->
['Welcome to Angular']

【讨论】：