Question

尝试将Angularjs项目更新为Angular4。我有一个JSON休息端点，按日期和时间提供活动列表。在AngularJS中，我使用ng-repeat来迭代数据，并使用ng-show跳过重复数据[$ index-1]。什么是在angular4中实现相同结果的正确方法？

Old code
<div ng-repeat="x in catview">
    <div ng-show="x.date != catview[$index -1].date">
        <h3>{{x.date | date: 'EEEE, MMM d'}}</h3>
    </div>
    <div class="{{x.category}}">
        <i class="{{x.category}}" ></i>
    </div>
    <div>
        <p>{{x.description}}</p>
        <p>{{x.time | date: 'shortTime' }} at {{x.place}}</p>
    </div>
</div>

the data looks like:
[{date:2017-06-23,category:dining,description:dinner, 
time:15:00,place:central},
{date:2017-06-23,category:shopping,description:walmart, 
time:15:30,place:central},
{date:2017-06-24,category:sleeping,description:hotel, 
time:15:00,place:central},
{date:2017-06-24,category:travel,description:bus ride, 
time:16:00,place:depot},]

并且应该产生：

June, 23 2017
  15:00 dinner at central
  15:30 shopping at walmart
June, 24 2017
  15:00 sleeping at hotel
  16:00 bus ride at depot

任何帮助？

Answer 1

应该是这样的：

<div *ngFor="let x of catview; index as i; first as isFirst">
  <div *ngIf="isFirst || x.date != catview[i -1].date">
    <h3>{{x.date | date: 'EEEE, MMM d'}}</h3>
  </div>
  <div [ngClass]="x.category"><i [ngClass]="x.category"></i></div>
  <div>
    <p>{{x.description}}</p>
    <p>{{x.time | date: 'shortTime' }} at {{x.place}}</p>
  </div>
</div>

注意他们建议使用ngForOf代替ngFor：https://angular.io/api/common/NgFor，试试吧！

Angular4 - 跳过* ngFor上的重复值

1 个答案: