问题动态创建线路

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>

我需要使用该表的参考字段来创建该行对于更改的每个日期，我需要一个新的行。

Answer 1

在重复部分的末尾，为什么不将日期存储在温度var中，然后在循环开始时与NGIF进行比较，如果不等于它新日期...或仅比较数组中的值。

Answer 2

  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>