Je cherche le résultat ci-dessous avec imbriqué Code angulaire P> JSON code>. Je ne suis pas en mesure de revenir / appeler des clés et des valeurs dans le modèle de manière dynamique. Lien de réfraction est joint pour détail VeiW let checklist = {
"CS": [
{
"id": "1",
"name": "A"
},
{
"id": "2",
"name": "B"
},
{
"id": "3",
"name": "C"
}
],
"Comment": [
{
"id": "1",
"name": "D"
},
{
"id": "2",
"name": "E"
},
{
"id": "3",
"name": "F"
}
]
}
<div *ngFor="let item of Checklist | Key">
{{key}}
<div>{{item}}</div>
</div>
3 Réponses :
Utiliser keyvalue code> tuyau pour boucler sur des objets dans le modèle dans le modèle, utilisez des CSS pour modifier l'affichage, mais un code comme ci-dessous servira votre besoin. import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customKeyvalue',
pure: true // keyvalue pipe is actually impure, which means this value would be false
})
export class CustomKeyvaluePipe implements PipeTransform {
transform(inputOb: any): any {
let returnVal = [];
for (let eachKey in inputOb) {
returnVal.push({key: eachKey, value: inputOb[eachKey]})
}
return returnVal
}
}
Avoir un problème dans le placement avec KeyValue, "le tuyau keyvalue" n'a pas pu être trouvé "
@Querymermaster: Quelle est votre version angulaire?
La version angulaire est 5.2.0
@Querymermaster: Créez ensuite un tuyau personnalisé qui servira le même objectif, je mettrai à jour la réponse, keyvalue a été introduit dans V6
vous répondez est précis, ne soyez pas éditable, aimez bien apporter une nouvelle réponse avec la référence de la vieille version
@Querymermaster: J'ai mis à jour la réponse dans une section distincte Edit , il n'était vraiment pas nécessaire d'ajouter une nouvelle réponse ..
Merci pour votre réponse parfaite, c'est vraiment travailler pour moi :)
L'astuce ici consiste à utiliser l'affichage Il est similaire à xyz Exemple " < Pré> xxx Exemple: https://angular-hzuexu.stackblitz.io : inline-block et vertical-align: haut .
Vous pouvez ajouter du CSS pour le faire paraître mieux, mais vous obtenez le gist maintenant :) p>
Ceci est le Stackblitz Link que vous pouvez modifier. p> p>