Angular - невозможно сопоставить данные json с интерфейсом, который был определен с помощью подписки

Question

Я вложил данные JSON, но не могу сопоставить их с моделью данных интерфейса.Я получаю ошибку undefined.Следовательно, я не могу использовать интерфейсную модель во внешнем интерфейсе.

Я использую ASP.NET Core в качестве внутреннего интерфейса, а Angular 7 - в качестве внешнего интерфейса.Вот данные JSON, которые были получены из серверной части.

{
    "error": null,
    "errorCode": 0,
    "entity": null,
    "entities": [
        {
            "portfolioName": "Enterprise Applications",
            "products": [
                {
                    "productId": 1,
                    "productName": "CRM 360",
                    "threshold": 2.67,
                    "baseline": 2.76,
                    "current": 3,
                    "target": 0.12,
                    "targetValue": 3.09
                },
                {
                    "productId": 3,
                    "productName": "ERP 360",
                    "threshold": 3,
                    "baseline": 3,
                    "current": 3,
                    "target": 3.54,
                    "targetValue": 0
                }
            ],
            "id": "1"
        },
        {
            "portfolioName": "Laboratory Applications",
            "products": [
                {
                    "productId": 10,
                    "productName": "Radiology Suit",
                    "threshold": 2.8,
                    "baseline": 2.4,
                    "current": 2.4,
                    "target": 2.76,
                    "targetValue": 0
                }
            ],
            "id": "2"
        }
    ]
}


Here is the Interface that is being defined

export interface Products {
    productName: string;
    threshold: number;
    baseline: number;
    target: number;
    targetValue: number;
    current: number;
}

export interface Dashboard {
    portfolioId: any;
    portfolioName: string;
    dashboardItems: Products[];
}


Here is the getdashboard method to retrieve data from API:

  public getDashboardData(year: number) {
    return this._http.get<ServerResponse<Dashboard>>(`/api/dashboard/GetDashBoard?year=${year}`).pipe(
      map(response => this._commonService.handleServerResponse(response) || [])
    );
  }

Here is the function to subscribe to the retrieved data.


  getDashboardData(year = new Date().getFullYear()) {
  this.resourceSvc.getDashboardData(year).subscribe((res: Dashboard[]) => {
      this.dashboardData = res as Dashboard[];
      console.log(this.dashboardData);
    });
  }




Here is the function to subscribe to the retrieved data.


  getDashboardData(year = new Date().getFullYear()) {
  this.resourceSvc.getDashboardData(year).subscribe((res: Dashboard[]) => {
      this.dashboardData = res as Dashboard[];
      console.log(this.dashboardData);
    });
  }

Facing issue with this code. 

Argument of type ‘(res: Dashboard[]) => void’ is not assignable to parameter of type ‘(value: Dashboard[]) =>
void’.
Types of para.eters ‘res’ and ‘value’ are incompatible.
Type ‘import(”e:/WorkDir/KnowledgeManage.ent/LeanPM/SkillsCrafter Working/SkilisCrafter
Angular/src/app/knowledge/dashboar’d/dashboard.types”).Dashboard[]’ is not assignable to type
‘import(”e: /WorkDir/KnowledgeManage.ent/LeanPM/SkillsCrafter Working/SkilisCrafter
Angular/src/app/knowledge/kidashboard/kidashboard.types”).Dashboard[]’.
Property ‘dashboardttems’ is missing in type ‘Dashboard’ but required in type ‘Dashboard’. ts(2345)

Мне нужно сопоставить вывод JSON с интерфейсом, чтобы я мог использовать его в угловых формах для отображения данных JSON.Но в настоящее время появляется ошибка при отображении интерфейса.Как я могу отобразить данные Интерфейса так, чтобы я мог получать данные в соответствии с интерфейсом, чтобы отображать данные в угловой форме