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

在重复部分的末尾，为什么不将日期存储在temp 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>

动态创建线时出现问题

2 个答案: