Почему значение не обновляется в шаблоне в angular?

Question

У меня есть angular component, в котором у меня есть функция onInit, и в этом я делаю это

  pastAppts: any = [];
  presentAppt: any = [];

  this.dataService.getData().subscribe(obj => {
  // console.log('in upcoming subscruber : ', obj);
  if (obj.data.type === 'passdata' && obj.data.key === 'customer-appointments' && obj.data.data) {
    this.userAppointments = obj.data.data.length > 0 ? obj.data.data : [];
    console.log('appointments : ', this.userAppointments);
    this.userAppointments = this.userAppointments.sort(function (a, b) {
      return new Date(b.startDateTime).getTime() - new Date(a.startDateTime).getTime();
    });
    this.pastAppts = this.userAppointments.filter(i => i.start && new Date(i.start).getDate() < new Date().getDate());
    this.presentAppt = this.userAppointments.filter(i => i.start && new Date(i.start).getDate() >= new Date().getDate());
    console.log(this.pastAppts.length, this.presentAppt.length);
  }
});

component.html

<div class="past-appointment-section" *ngIf="pastAppts.length > 0">
<div class="ui-g-12 p-zero plr-5 mt-2">
  <p class="appointment-heading text-center">Past Appointments</p>
</div>
<div>
  <div *ngFor="let appointment of pastAppts | slice:0:2">
    <app-appointment-card [appointment]="appointment" [isPast]="true"></app-appointment-card>
  </div>
</div>

Проблема в том, что в моем компе onet .ts в этой строке console.log(this.pastAppts.length, this.presentAppt.length); я получаю длины 11,0 это означает, что pastAppts имеет длину 11, но в шаблоне мое значение не обновляется и что html не рендеринг. Почему это не обновление значения в шаблоне?