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

Question

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

下面是我的样本数据

{ 

   '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

我怎样才能达到上述格式。我正在使用角度4用于UI。有没有支持我要求的网格？

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

Answer 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']