Comment itérer les clés d'objet avec * ngFor

Question

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'objet mais un objet d'objet qui contient d'autres objets.

 {

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "test@example.com",
    "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": "test@example.com"
  }
}
 

Je sais que nous pouvons utiliser pipe pour itérer l'objet, mais comment nous pouvons itérer davantage d'un objet à l'autre signifie data-> picture-> thum: url .

Answer 1

Angulaire 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-beta1-2018-06-13

introduit un 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']]);
}

d'origine

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">

Voir aussi Comment itérer clés de l'objet à l'aide de *ngFor?

Answer 2

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 template:

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

Answer 3

Je sais que cette question est déjà répondu, mais j'ai une solution pour cela même.

Vous pouvez également utiliser Object.keys() à l'intérieur de l' *ngFor pour obtenir de résultat requis.

J'ai créé une démo sur stackblitz. J'espère que cela aidera/guide pour vous/pour les autres.

EXTRAIT DE CODE

Code HTML

<div *ngFor="let key of Object.keys(myObj)">
  <p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>

.ts fichier de code

Object = Object;

myObj = {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "1234567890",
    "role": null,
    "email": "test@example.com",
    "picture": {
        "url": null,
        "thumb": {
            "url": null
        }
    },
    "address": "XYZ Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
}

Answer 4

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"
 

Answer 5

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);
  }
}
 

2. Dans un fichier de modèle angulaire, 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>