No overload matches this call – Angular 13

It’s been days with this issue I’m having lately.

I’m trying to iterate over a Object in JSON but I cannot have access to.

I’ve created lots of posts before relating the same issue, but I cannot find the solution.


I’m trying to iterate this very JSON from my API (Node.js):

{
    "id": 1,
    "title": "App Komputer",
    "description": "Website dedicated to computer related products",
    "accessCode": "5128",
    "createdAt": "2022-01-13T21:19:11.000Z",
    "updatedAt": "2022-01-13T21:19:16.000Z",
    "sprints": [{
        "id": 1,
        "title": "Sprint 1",
        "releaseDate": "2022-01-20T21:37:13.000Z",
        "description": "Specs up to 01/22/2022",
        "createdAt": "2022-01-13T21:37:58.000Z",
        "updatedAt": "2021-12-13T01:46:36.000Z",
        "projectId": 1,
        "specifications": [{
            "id": 1,
            "title": "Add product button",
            "description": "New product button HTML",
            "duration": 10,
            "status": 1,
            "createdAt": "2021-12-23T01:46:36.000Z",
            "updatedAt": "2021-12-23T01:46:36.000Z",
            "sprintId": 1
        }]
    }]
}

This is my project-details.component.ts, from where through the function getProject() I get the JSON.

import { Component, Input, OnInit } from '@angular/core';
import { ProjectService } from 'src/app/services/project.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from 'src/app/models/project.model';
import { Title } from "@angular/platform-browser";
import { Moment } from 'moment';
import { EChartsOption } from 'echarts';

@Component({
  selector: 'app-project-details',
  templateUrl: './project-details.component.html',
  styleUrls: ['./project-details.component.css']
})
export class ProjectDetailsComponent implements OnInit {

  @Input() viewMode = false;

  @Input() currentProject: Project = {
    title: '',
    description: '',
    accessCode: ''
  };
  
  message = '';

  constructor(
    private projectService: ProjectService,
    private route: ActivatedRoute,
    private router: Router,
    private _titleService: Title
    ) { }

  ngOnInit(): void {
    if (!this.viewMode) {
      this.message = '';
      this.getProject(this.route.snapshot.params["id"]);
    }
  }

  getProject(id: string): void {
    this.projectService.get(id)
      .subscribe({
        next: (data) => {
          this.currentProject = data;
          console.log(data);
          this._titleService.setTitle(data.title+' ยท Scrumy');
        },
        error: (e) => console.error(e)
      });
  }

}

I need to access the sub array called sprints from my template, which is:

<mat-toolbar>
    <span>{{ currentProject.title }}</span>
</mat-toolbar>
<div class="data-panel">
  <mat-card>
    <mat-toolbar style="border-radius: 4px 4px 0px 0px;">
              <span>Development</span>
          </mat-toolbar>
          <mat-card-content>
            <span>Access Code: {{ currentProject.accessCode }}</span>
            <div *ngFor="let item of currentProject | keyvalue">
              {{item.key}}:{{item.value}}
            </div>
          </mat-card-content>
  </mat-card>
</div>

But with this, I got this error:

Compiled with problems:X

ERROR

src/app/components/project-details/project-details.component.html:11:38 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Project' is not assignable to parameter of type 'Record<keyof Project, any> | ReadonlyMap<keyof Project, any> | null | undefined'.

11             <div *ngFor="let item of currentProject | keyvalue">
                                        ~~~~~~~~~~~~~~

  src/app/components/project-details/project-details.component.ts:11:16
    11   templateUrl: './project-details.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ProjectDetailsComponent.

I don’t know what to do from now on.

If I get the first level data from the JSON (f.e: title), it will work correctly. But if I try to iterate over the subarray, I get this very error.

How can I solve this?

Thank you very much for your wisdom and experience.