在angular 12中迭代嵌套json

Question

我目前正在使用angular 12.2.5和嵌套json对象的工作，我从API响应我想打印响应，因为我是新的角，这就是为什么不知道如何正确地通过它迭代这里是下面的代码。我只想要标题，视图和解决方案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"
}
]
}

Answer 1

从*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>

工作示例