ngFor with keyvalue pipe: Type 'unknown' is not assignable to type 'NgIterable<any>'

I am trying to iterate this object

{
"2021-11-22": [
{
"id": 1,
"standard_id": 2,
"user_id": 4,
"subject_id": 1,
"exam_date": "2021-11-22",
"start_time": "09:45:00",
"end_time": "02:52:00",
"description": "kjhkjhkjhkjhkj\n\n\njgfhgfhgfghfghfhg",
"deleted_at": null,
"created_at": "2021-11-22T03:47:34.000000Z",
"updated_at": "2021-11-22T03:47:34.000000Z",
"subject": {
"id": 1,
"standard_id": 2,
"name": "engilsh",
"deleted_at": null,
"created_at": "2021-11-21T07:11:15.000000Z",
"updated_at": "2021-11-21T07:11:15.000000Z"
}
},
{
"id": 2,
"standard_id": 2,
"user_id": 4,
"subject_id": 2,
"exam_date": "2021-11-22",
"start_time": "09:45:00",
"end_time": "10:45:00",
"description": "kjhkjhkjhkjhkj\n\n\njgfhgfhgfghfghfhg",
"deleted_at": null,
"created_at": "2021-11-22T03:49:41.000000Z",
"updated_at": "2021-11-22T03:49:41.000000Z",
"subject": {
"id": 2,
"standard_id": 2,
"name": "Physics",
"deleted_at": null,
"created_at": "2021-11-21T07:17:25.000000Z",
"updated_at": "2021-11-21T07:17:25.000000Z"
}
}
],
"2021-11-23": [
{
"id": 3,
"standard_id": 2,
"user_id": 4,
"subject_id": 1,
"exam_date": "2021-11-23",
"start_time": "09:30:00",
"end_time": "10:30:00",
"description": null,
"deleted_at": null,
"created_at": "2021-11-22T04:52:04.000000Z",
"updated_at": "2021-11-22T04:52:04.000000Z",
"subject": {
"id": 1,
"standard_id": 2,
"name": "engilsh",
"deleted_at": null,
"created_at": "2021-11-21T07:11:15.000000Z",
"updated_at": "2021-11-21T07:11:15.000000Z"
}
},
{
"id": 4,
"standard_id": 2,
"user_id": 4,
"subject_id": 2,
"exam_date": "2021-11-23",
"start_time": "09:30:00",
"end_time": "10:30:00",
"description": null,
"deleted_at": null,
"created_at": "2021-11-22T04:53:18.000000Z",
"updated_at": "2021-11-22T04:53:18.000000Z",
"subject": {
"id": 2,
"standard_id": 2,
"name": "Physics",
"deleted_at": null,
"created_at": "2021-11-21T07:17:25.000000Z",
"updated_at": "2021-11-21T07:17:25.000000Z"
}
}
]
}


I tried using *ngFor with keyvalue pipe to loop through but am facing issue when trying ngFor for the values. This is what I have tried

<ion-accordion-group>
<ion-accordion value="{{item.key}}" *ngFor="let item of exams | keyvalue">
<ion-item slot="header">
<ion-icon slot="start" name="calendar-outline" color="danger"></ion-icon>
<ion-label>Exam Date: {{item.key}}</ion-label>
<!-- <ion-label class="ion-text-wrap">hh{{item.value | json}}</ion-label> -->
</ion-item>
<ion-list slot="content">
<ion-item *ngFor="let items of item['value']">
<ion-icon slot="start" name="trash" color="danger"></ion-icon>
<ion-label class="ion-text-wrap">
<h2>{{items.subject.name | titlecase}}</h2>
<p>{{items.description}}<br />Posted By {{items.user.name | titlecase}}</p>
<p>Start Time: {{items.start_time}}<br />End Time: {{items.end_time}}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>


the second *ngFor gives an error

Type 'unknown' is not assignable to type 'NgIterable'.
​

Continue reading...