Проблемы с созданием линии динамически

Question

У меня проблема, мне нужно создать динамическую строку в соответствии с датой, мне нужно создавать строку всякий раз, когда дата меняется здесь мой HTML-код:

     <table  class="table table-striped" height="100%">
            <thead>


                <tr>

                    <th width="170px" class="fileName alignCenter"><label class="titLabel">Date Event</label></th>
                    <th width="170px" class="fileName alignCenter"><label class="titLabel">Event Type</label></th>
                    <th width="150px"  class="alignCenter"><label class="titLabel">&nbsp;RE1A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE2A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE3A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE4A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE5A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE6A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE7A</label></th>
                    <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;Total Event</label></th>
                </tr>


            </thead>
            <tbody>

                <tr id="no-results" ng-hide="{{noResults}}" ng-show="{{!noResults}}">
               </tr>
                <tr ng-repeat="output in result">
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.referenceDate | date:'dd/MM/yyyy'}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.eventType}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re1A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re2A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re3A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re4A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re5A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re6A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{output.re7A}}</label></td>
                    <td width="170px" class="alignCenter"><label>&nbsp;{{(output.re1A)+(output.re2A)+(output.re3A)+(output.re4A)+(output.re5A)+(output.re6A)+(output.re7A)}}</label></td>

                </tr>


                  <tr  class="primary">
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">Total RE</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75" ><label class="titLabel">{{}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE1A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE2A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE3A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE4A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE5A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE6A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE7A()}}</label></td>
                    <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalEvent()}}</label></td>
                  </tr> 


            </tbody>


        </table>

Мне нужноиспользуйте поле referenceDate этой таблицы для создания строки. Для каждой изменяющейся даты мне нужна новая строка.

Answer 1

  items = [{
          date: new Date(2018, 1, 2),
          event: 'test1'
        },
        {
          date: new Date(2018, 1, 2),
          event: 'test2'
        },
        {
          date: new Date(2018, 1, 3),
          event: 'test3'
        },
        {
          date: new Date(2018, 1, 4),
          event: 'test4'
        },
        {
          date: new Date(2018, 1, 4),
          event: 'test5'
        },
        {
          date: new Date(2018, 1, 4),
          event: 'test6'
        },
        {
          date: new Date(2018, 1, 5),
          event: 'test7'
        },
  ];


  <div *ngFor="let item of items; let i = index">
      <span *ngIf="(i>0) && ((items[i-1].date | date:'dd/mm/yyyy')  !== (items[i].date | date:'dd/mm/yyyy'))">
          {{i}} {{item.event}}  {{ items[i].date}} {{ items[i-1].date}}
      </span>
  </div>

Answer 2

в конце раздела повторения, почему вы не сохраняете дату во временной переменной, а затем сравниваете ее с новым значением с помощью ngIf в начале цикла, если оно не равно его новой дате ... Или просто сравнитезначения в массиве.