使用 HTML/angular2 模板引擎在 angular2 中进行动态数据可视化

Question

在前端处理数据时，通常很难将数据可视化以供用户理解。要可视化的（动态）数据结构良好且简单（重点关注数据大小和防止过载）。

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

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

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

示例：矩阵Table（例如一年中的时间段按每周分辨率计算）

数据(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
             }
    }
]

可视化：

数据应呈现为矩阵 table，其中包含三个 rows（与数据中的项目一样多的行）并且决议为每 row 52 周 (cells)。范围 (start - end) 应该在 table.

中突出显示

如上所述，我从其他模板引擎的角度出发，因此我试图弄清楚如何在 angular 中编写 loops 左右以获得此可视化。在其他模板引擎中，我会 'interpret' 模板中的数据并在两个 loops 中创建 HTML 因为这个 "overloading" 仅与视觉目的相关。

动态生成的标记 (EJS) - 方式

<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 中以有效的方式解决这个问题，我唯一能实现的解决方案（当然不好）是写下整个 HTML对于这样一个 table 矩阵。

每当所需的 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)">

使用 HTML/angular2 模板引擎在 angular2 中进行动态数据可视化

Dynamic data visualization in angular2 using HTML/angular2 template engine

markup

data-visualization

dynamic

angular2-template

angular