Array of objects isn’t empty but ngFor* shows as if there are none

I use an HTTP Get request to get a list of notifications, the name could be misinterpreted because it is just a list of posts that is collected, it doesn’t change. The problem is that I use an array to collect all the notifications with an interface and it doesn’t display them.

If I use a button called test to check the content of the array I see that all the objects are in the array yet it doesn’t work. error message

The example under load more is an example of one notification and how it should look like (hardcoded)
example

Code overview.component.html

<div class="content-wrapper">
  <div class="container-fluid">
    <div class="card mb-3">
      <div class="card-header">
        <i class="fas fa-bell"></i> Notifications
      </div>
      <div class="card-body">
        <div class="list-group list-group-flush small">
          <app-notification *ngFor="let notification1 of notifications" icon1="{{notification1.icon}}" message1="{{notification1.message}}"></app-notification>

          <button mat-raised-button (click)="test()">test</button>
          <a class="list-group-item list-group-item-action">Load more...</a>
        </div>
      </div>
    </div>
  </div>
</div>
<p *ngFor="let notif of notifications">{{notif.id}}</p>

Code overview.component.ts

export class OverviewComponent implements OnInit {

  notifications : Notificatie[] = [];

  constructor(private NotificationService: NotificationServiceService) { }

  ngOnInit(): void {
  this.NotificationService.getNotifications().subscribe((reponse => {this.notifications = Object.values(reponse)}));
  }
  test(){
    console.log(this.notifications);
  }

}

Code Notificatie Interface

export interface Notificatie {
    id?:number;
    message:string;
    icon:string;
}

Code Notification Service

export class NotificationServiceService {

  constructor(private http:HttpClient) { }

  url = "http://www.mocky.io/v2/5be453402f00002c00d9f48f";
  

  // Observable<Notificatie[]>
  getNotifications(): Observable<Notificatie[]>{
    return this.http.get<Notificatie[]>(this.url)
    
  }
}