HTML/angular2テンプレートエンジンを使用した、angular2での動的データの可視化

Question

フロントエンドのデータを扱う場合、ユーザーにとって理解しやすいデータを視覚化することはしばしば困難です。視覚化する（動的）データは、構造化されてシンプルです（データサイズと過負荷防止に重点を置いています）。

ただし、以下のデータ構造（DATA）は、ユーザーのための最良の視覚的表現ではありません。

私は、次の例を使用して、まだうまく解決できない問題を説明してみましょう：

そして、私は私がメインであるかもしれないEJSなどのようなテンプレートエンジンの観点から来ることをここで指摘してみましょう私は解決する簡単な方法が見つからない理由 - 知らないが...

例：マトリックス表（毎週決議による年に例えばタイムスロット）

ダTA（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にレンダリングされるべき3 rows 及び52の解像度で（データの項目のような多くの行として）週（cells）/ rowである。そして、その表で範囲（start - end）を強調表示する必要があります。 I上述したように

は、他のテンプレートエンジンの視点で来たので、私は、このビジュアライゼーションを取得するには、角度でloopsかそこらを作成する方法を把握してみてください。他のテンプレートエンジンでは、テンプレート内のデータを「解釈」し、2つのloopsにHTMLを作成します。この「オーバーロード」は視覚的な目的にのみ関係するためです。

動的に生成されるマークアップ（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で効率的な方法と私ができる唯一のソリューションでこれを解決することができないんだけど達成するためには、このような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)">