CODEWITHSUNDEEP
angularngfor
Exsite
Exsite

Reputation: 177

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

Upvotes: 10

Views: 9964

Answers (2)

Barremian
Barremian

Reputation: 31115

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

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

Upvotes: 33

Acker Apple
Acker Apple

Reputation: 495

For me, it turned out to be that the variable used in the keyvalue pipe, was invalid which causes an error to be logged for every variable reference within the *ngFor about being unknown.

To fix:

  • Ensure you have correct variable being referenced in *ngFor
  • Ensure your component file has a variable typing for what is being referenced

The top answer of $any() most likely addresses symptoms but does not address original cause

Upvotes: 3

Related Questions