Динамическая визуализация данных в угловом2 с использованием механизма шаблонов HTML/angular2

Question

При работе с данными в интерфейсе часто возникают проблемы с визуализацией данных, понятных для пользователя. (Динамические) данные для визуализации хорошо структурированы и просты (с акцентом на размер данных и предотвращение перегрузки).

Но приведенная ниже структура данных (DATA) не является лучшим визуальным представлением для пользователя.

Позвольте мне объяснить проблему, которую я не могу решить также еще используя следующий пример:

И позвольте мне подчеркнуть, что я пришел с точки зрения шаблонов двигателей, как EJS и т.д., которые могут быть основным причина, почему я не найти простой способ решить эту проблему - не знаю ...

Пример: Матрица Таблица (например, временные интервалы в год по еженедельным разрешением)

Da та (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 (столько строк, сколько элементов в данных) и с разрешением 52 недель (cells) за row. И диапазон (start - end) должен быть выделен в этой таблице.

Как уже упоминалось выше, я пришел с точки зрения других шаблонных двигателей и поэтому я стараюсь, чтобы выяснить, как писать loops или так в угловую, чтобы получить эту визуализацию. В других моделях шаблонов я бы «интерпретировал» данные в шаблоне и создавал HTML в двух loops, потому что эта «перегрузка» применима только для визуальных целей.

Динамически генерируемые разметки (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 или около того). Я знаю, что поиск & заменит в разметке;), но по-прежнему много разметки для поддержки, которые могут быть сгенерированы, и я думаю, что также должен быть способ сделать это в 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)">