基于HTML/angular2 2模板引擎的angular2动态数据可视化

Question

在前端处理数据时，经常会遇到一些挑战，要可视化用户可以理解的数据。要可视化的(动态)数据结构良好且简单(重点关注数据大小和防止重载)。

但是下面的数据结构(DATA)并不是用户的最佳视觉表示。

让我用下面的例子解释一下我还不能很好解决的问题：

让我在这里指出，我是从模板引擎(如EJS等)的角度出发的，这可能是我找不到一个简单的解决方法的主要原因--不知道.

示例:矩阵表(例如，按每周分辨率计算的一年中的时隙)

(**DATA**):数据

[
    {
        name:'Slot 1',
        slot:{
                start:3,
                end:5
             }
    },
    {
        name:'Slot 2',
        slot:{
                start:32,
                end:50
             }
    },
    {
        name:'Slot 3',
        slot:{
                start:10,
                end:26
             }
    }
]

Visualization:

应该将数据呈现为一个矩阵table，其中包含三个rows (与数据中的项一样多)，每个row的分辨率为52周(cells)。而范围(start - end)应在该表中突出显示.

​

​

如前所述，我提供了其他模板引擎的透视图，因此我试图找出如何以角度编写loops左右来实现这种可视化。在其他模板引擎中，我会“解释”模板中的数据，并在两个HTML中创建loops，因为这种“重载”只是为了视觉目的。

动态生成的标记(**EJS**) - way

<table>

<%  var i, weeks=52;
    for(i=0;i<DATA.length;i+=1){
%>

<tr>
    <td><%-DATA[i].name%></td>

    <%  var j;
        for(j=1;j<=weeks;j+=1){
    %>

    <td class="<%((j>=DATA[i].slot.start && j<= DATA[i].slot.end)?'in-range':'')%>">
        <%- j %>
    <td>


    <%}%>

</tr>

<%}>

</table>

量化：

实际上，我无法在Angular 2.x中以有效的方式解决这个问题，我目前所能实现的唯一解决方案(当然不是很好)就是为这样一个table矩阵编写整个HTML。

当需要对HTML进行更改时(例如，添加一个class左右)，这显然会产生巨大的开销。我知道搜索&在标记中进行替换;)但是仍然需要维护大量的标记，可以生成这些标记，我认为在Angular2中也必须有这样的方法。

谢谢你帮我找到更好的方向。

Answer 1

您可以使用以下代码获得所需的布局：

  <table>
    <tr *ngFor="let row of DATA">
      <td>{{ row.name }}</td>
      <td *ngFor="let week of weeks"
          [class.in-range]="row.slot.start <= week && week <= row.slot.end">
        {{ week }} 
      </td>
    </tr>
  </table>

其中使用weeks = [1, 2, 3, ..., 52]或，使用此辅助函数：

export function range(count: number, from = 0) {
  return Array.from(Array(count)).map((_, i) => i + from);
}

<td *ngFor="let week of range(52)">