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

CodePudding user response：

Try disabling the type checking in template using $any().

<ion-item *ngFor="let items of $any(item).value">
...
</ion-item>