Je veux itérer [objet objet] en utilisant * ngFor dans Angular 2.
Le problème est que l’objet n’est pas un tableau d’objets mais un objet d’objet contenant d’autres objets.
{
"data": {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "03215110224",
"role": null,
"email": "[email protected]",
"picture": **{ <-- I want to get thumb: url but not able to fetch that**
"url": null,
"thumb": {
"url": null
}
},
"address": "Nishtar Colony",
"city_id": 2,
"provider": "email",
"uid": "[email protected]"
}
}
Je sais que nous pouvons utiliser pipe pour itérer l'objet, mais comment itérer davantage d'un objet à l'autre signifie data-> picture-> thum: url.
angulaire 6.0.0
https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25
introduit une KeyValuePipe
Voir aussi https://angular.io/api/common/KeyValuePipe
@Component({ selector: 'keyvalue-pipe', template: `<span> <p>Object</p> <div *ngFor="let item of object | keyvalue"> {{item.key}}:{{item.value}} </div> <p>Map</p> <div *ngFor="let item of map | keyvalue"> {{item.key}}:{{item.value}} </div> </span>` }) export class KeyValuePipeComponent { object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; map = new Map([[2, 'foo'], [1, 'bar']]); }
original
Vous pouvez utiliser un tuyau
@Pipe({ name: 'keys', pure: false })
export class KeysPipe implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value)//.map(key => value[key]);
}
}
<div *ngFor="let key of objs | keys">
Je pense que la façon la plus élégante de le faire est d'utiliser le javascript Object.keys
comme ceci:
dans le composant, passez l'objet au modèle:
Object = Object;
puis dans le modèle:
<div *ngFor="let key of Object.keys(objs)">
my key: {{key}}
my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>
Vous devez créer un tuyau personnalisé.
import { Injectable, Pipe } from '@angular/core';
@Pipe({
name: 'keyobject'
})
@Injectable()
export class Keyobject {
transform(value, args:string[]):any {
let keys = [];
for (let key in value) {
keys.Push({key: key, value: value[key]});
}
return keys;
}}
Et puis utilisez-le dans votre * ngFor
*ngFor="let item of data | keyobject"
Je sais que cette question a déjà reçu une réponse, mais j’ai une solution pour la même chose.
Vous pouvez également utiliser Object.keys()
à l'intérieur de *ngFor
pour obtenir le résultat requis.
J'ai créé une démo sur stackblitz. J'espère que cela vous aidera/guidera les autres.
CODE SNIPPET
Code HTML
<div *ngFor="let key of Object.keys(myObj)">
<p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>
code de fichier .ts
Object = Object;
myObj = {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "1234567890",
"role": null,
"email": "[email protected]",
"picture": {
"url": null,
"thumb": {
"url": null
}
},
"address": "XYZ Colony",
"city_id": 2,
"provider": "email",
"uid": "[email protected]"
}
1.Créez un canal personnalisé pour obtenir les clés.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'keys'
})
export class KeysPipe implements PipeTransform {
transform(value: any, args?: any): any {
return Object.keys(value);
}
}
- Dans le fichier de modèle angular, vous pouvez utiliser * ngFor et effectuer une itération sur votre objet object
<div class ="test" *ngFor="let key of Obj | keys">
{{key}}
{{Obj[key].property}
<div>
Angular a maintenant un type d’itération Object correspondant exactement à ce scénario, appelé Set. Cela répondait à mes besoins lorsque j'ai trouvé cette question en train de chercher. Vous créez le jeu, "ajoutez-le" comme vous le feriez "Push" dans un tableau, et déposez-le dans un ngFor comme un tableau. Pas de tuyaux ou quoi que ce soit.
this.myObjList = new Set();
...
this.myObjList.add(obj);
...
<ul>
<li *ngFor="let object of myObjList">
{{object}}
</li>
</ul>
Si vous utilisez un opérateur map()
sur votre réponse, vous pouvez peut-être y chaîner un opérateur toArray()
... alors vous devriez pouvoir parcourir le tableau nouvellement créé ... au moins, cela a fonctionné pour moi :)