Question

在处理前端中的数据时，通常会遇到使用户可理解的数据可视化的挑战。可视化的（动态）数据结构合理，简单（关注数据大小和防止过载）。

但是下面的数据结构（DATA）当然不是用户的最佳视觉表现。

让我通过以下示例解释我无法解决的问题：

让我在这里指出，我来自像EJS等模板引擎的角度，这可能是我找不到简单解决方法的主要原因 - 不要＃39;知道......

示例：矩阵表（例如，每周分辨率的一年中的时段）

数据（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（与数据中的项目一样多的行）每cells分辨率为52周（row）。范围（start - end）应该在该表中突出显示。

如上所述，我带来了其他模板引擎的视角，因此我试图找出如何在角度中编写loops左右以获得此可视化。在其他模板引擎中，我会解释＆＃39;模板中的数据并在两个HTML中创建loops，因为这会超过＆＃34;重载＆＃34;仅与视觉目的相关。

动态生成标记（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>

Qustion：

实际上我无法在Angular 2.x中以有效的方式解决这个问题，而我能够实现的唯一解决方案（当然不是很好）就是编写整个HTML对于这样的table矩阵。

只要HTML需要更改（例如添加class左右），这就会产生巨大的开销。我知道搜索＆amp;替换标记;）但它仍然需要维护很多可以生成的标记，我认为必须有一种方法可以在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中动态数据可视化

1 个答案: