Angular4-跳过* ngFor上的重复值

Question

Trying to update a Angularjs project to Angular4. I have a JSON rest endpoint that provides a list of activities by date and time. in AngularJS, I used ng-repeat to iterate the data and ng-show to skip repeating data using [$index-1]. what's the proper way to accomplish the same result in 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},]

and should produce:

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

any help?

Answer 1

should be somehow like this:

<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>

pay attention they recommend to use already ngForOf instead of ngFor : https://angular.io/api/common/NgFor , just give it a try!