Angular4 - 繰り返し値をスキップする* ngFor

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 

任意のヘルプ？ https://angular.io/api/common/NgFor、ちょうどそれを試してみる：彼らはすでにngForOf代わりngForのを使用することをお勧めします

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

注意を払う：

Answer 1

は何とかこのようにする必要があります！