web-dev-qa-db-fra.com

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

J'ai fouillé et découvert que je pouvais utiliser ce qui suit pour utiliser * ngFor sur un objet:

 <div *ngFor="#obj of objs | ObjNgFor">...</div>

où ObjNgFor pipe est:

@Pipe({ name: 'ObjNgFor',  pure: false })
export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => value[key]);
    }
}

Cependant, quand j'ai un objet comme celui-ci:

{
"propertyA":{
    "description":"this is the propertyA",
    "default":"sth"
 },
"propertyB":{
    "description":"this is the propertyB",
    "default":"sth"
 }
}

Je ne sais pas trop comment extraire 'propertyA' et 'propertyB', afin qu'il soit accessible à partir de la directive * ngFor. Des idées?

METTRE &AGRAVE; JOUR

Ce que je veux faire, c'est présenter le code HTML suivant:

        <div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
            <div class="parameter-desc">
                {{SOMETHING}}:{{obj.description}}
            </div>
        </div>

Où quelque chose serait égal à propertyA et propertyB (c'est ainsi que l'objet est structuré). Cela conduirait donc à:

propertyA:this is the propertyA
propertyB:this is the propertyB
angulartypescriptobjectngfor
8
uksz

Mettre à jour

Dans 6.1.0-beta.1KeyValuePipe a été introduit https://github.com/angular/angular/pull/24319

<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

Exemple Plunker

La version précédente

Tu pourrais essayer quelque chose comme ça

export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => Object.assign({ key }, value[key]));
    }
}

Et ensuite sur votre modèle

  <div *ngFor="let obj of objs | ObjNgFor">
   {{obj.key}} - {{obj.description}}
  </div>

Plunker

10
yurzui

Ou au lieu de créer un tuyau et de transmettre un objet à * ngFor, il suffit de passer Object.keys(MyObject) à * ngFor. Il retourne le même que le tuyau, mais sans les tracas.

Sur un fichier TypeScript:

let list = Object.keys(MyObject); // good old javascript on the rescue

Sur modèle (html):

*ngFor="let item of list"
15
Jorge

Il suffit de renvoyer les clés du canal au lieu des valeurs, puis d’utiliser les clés pour accéder aux valeurs:

(let au lieu de # dans la beta.17)

@Pipe({ name: 'ObjNgFor',  pure: false })
export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

@Component({
    selector: 'my-app',
    pipes: [ObjNgFor],
    template: `
    <h1>Hello</h1>
 <div *ngFor="let key of objs | ObjNgFor">{{key}}:{{objs[key].description}}</div>    `,
})
export class AppComponent {
  objs = {
    "propertyA":{
      "description":"this is the propertyA",
      "default":"sth"
    },
    "propertyB":{
      "description":"this is the propertyB",
      "default":"sth"
    }
  };
}

exemple Plunker

Voir aussi Sélection basée sur enum dans Angular2

12
Günter Zöchbauer

keys.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(obj: Object, args: any[] = null): any {
        let array = [];
        Object.keys(obj).forEach(key => {
            array.Push({
                value: obj[key],
                key: key
            });
        });
        return array;
    }
}

app.module.ts 

import { KeysPipe } from './keys.pipe';

@NgModule({
  declarations: [
    ...
    KeysPipe
  ]
})

example.component.html 

<elem *ngFor="let item of obj | keys" id="{{ item.key }}">
    {{ item.value }}
</elem>
0
jadeallencook