J'ai du mal à itérer un objet json dans le Ngfor, voici mon modèle:
modèle:
<h1>Hey</h1>
<div>{{ people| json}}</div>
<h1>***************************</h1>
<ul>
<li *ngFor="#person of people">
{{
person.label
}}
</li>
</ul>
people est l'objet json que j'essaie d'itérer, j'ai le résultat de (people | json) et je n'obtiens pas la liste, voici une capture d'écran:
et pour finir, voici une partie du fichier json:
{
"actionList": {
"count": 35,
"list": [
{
"Action": {
"label": "A1",
"HTTPMethod": "POST",
"actionType": "indexation",
"status": "active",
"description": "Ajout d'une transcription dans le lac de données",
"resourcePattern": "transcriptions/",
"parameters": [
{
"Parameter": {
"label": "",
"description": "Flux JSON à indexer",
"identifier": "2",
"parameterType": "body",
"dataType": "json",
"requestType": "Action",
"processParameter": {
"label": "",
"description": "Flux JSON à indexer",
"identifier": "4",
"parameterType": "body",
"dataType": "json",
"requestType": "Process"
}
}
},
n'hésitez pas à m'aider
Votre objet people
n'est pas un tableau, vous pouvez donc l'itérer hors de la boîte.
Il y a deux options:
Vous souhaitez parcourir une sous-propriété. Par exemple:
<ul>
<li *ngFor="#person of people?.actionList?.list">
{{
person.label
}}
</li>
</ul>
Vous souhaitez parcourir les clés de votre objet. Dans ce cas, vous devez implémenter un canal personnalisé:
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
if (!value) {
return value;
}
let keys = [];
for (let key in value) {
keys.Push({key: key, value: value[key]});
}
return keys;
}
}
et utilisez-le de cette façon:
<ul>
<li *ngFor="#person of people | keys">
{{
person.value.xx
}}
</li>
</ul>
Voir cette réponse pour plus de détails: