iterating through nested json in angular 12

i am currently using angular 12.2.5 and working on nested json object which I got from the API response I want to print that response since I am new to angular that's why don't know properly how to iterate through it here is the code below.. i want only title and views and solution id

<div>
  <ng-container *ngFor="let element of myArray | keyvalue">
    <ng-container *ngFor="let content of element['Sector: Public Sector[14]']">
<ion-card *ngFor="let james of content.solutionDetails | keyvalue">
  <ion-card-header style="background-image: url('');background-size: cover;min-height:10rem;max-height:10rem;">
    <button class="button-insight"></button>
    <ion-card-title class="card-header-text"></ion-card-title>
  </ion-card-header>
   {{james.title}}
  <ion-card-content class="card-content">
    
    <hr class="hr">
  </ion-card-content>
</ng-container>
</ng-container>
</div>

----------

# this is my json data

`



``
{
    "Sector: Public Sector[14]": [
        {
            "solutionDetails": {
                "title": "Demand Sensing and Inventory Optimization",
                "field_solutiontype": "Insight",
                "avgRating": 0.0,
                "userCount": 1,
                "views": 0,
                "solutionType": "Insight",
                "canShare": true,
                "canExplore": true,
                "canRequest": false
            },
            "solutionId": "118"
        },
           {
            "solutionDetails": {
                "title": "content management",
               开发者_运维技巧 "field_solutiontype": "Insight",
                "avgRating": 0.0,
                "userCount": 1,
                "views": 223,
                "solutionType": "framework",
                "canShare": true,
                "canExplore": false,
                "canRequest": false
            },
            "solutionId": "128"
        }
    ]
}

remove the keyvalue pipe from the *ngFor

<div>
  <ng-container *ngFor="let element of myArray">
     <ion-card *ngFor="let content of element['Sector: Public Sector[14]']>
       <ion-card-header style="background-image: url('');background-size: cover;min-height:10rem;max-height:10rem;">
         <button class="button-insight"></button>
         <ion-card-title class="card-header-text"></ion-card-title>
       </ion-card-header>
       {{content.solutionDetails.title}}
       <ion-card-content class="card-content">
          <hr class="hr">
       </ion-card-content>
   </ng-container>
</div>

working example Stackblitz