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

J'ai fouiné partout, et a trouvé que je peux 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 suis pas tout à fait sûr de savoir comment je peux extraire propertyA " et "propertyB", de sorte qu'il est accessible à partir de l' *ngFor directive. Des idées?

Mise à JOUR

Ce que je veux faire, est de 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 égale à propertyA et propertyB (c'est la façon dont l'objet est structurée). Donc, cela donnerait:

propertyA:this is the propertyA
propertyB:this is the propertyB

InformationsquelleAutor uksz | 2016-05-05

Mise à jour

Dans 6.1.0-bêta.1 KeyValuePipe 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>

Plunker Exemple

Version précédente

Vous pouvez essayer quelque chose comme cela

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

Puis sur votre modèle

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

Plunker

La valeur de la clé à pipe est le tri par l'ordre des clés et des valeurs des commandes dans angulaire 6. Comment peut-on le désactiver ?

InformationsquelleAutor yurzui

16

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

Sur Tapuscrit fichier:
```
let list = Object.keys(MyObject); //good old javascript on the rescue
```
Sur le modèle (html):
```
*ngFor="let item of list"
```
- Merci!!!!!! Cela a l'air simple. Vous devez ajouter ce à mettre sur le modèle de la partie btw =)
- solution élégante. J'ai obtenu le nombre de valeurs et les valeurs de chaîne dans la liste même si j'ai donc utilisé la tranche méthode pour obtenir le bon côté du tableau: options.la tranche d'options.longueur / 2). Trouvé cette solution ici: stackoverflow.com/questions/38554562/...
InformationsquelleAutor Jorge
13

Il suffit de retourner les clés de la pipe au lieu de valeurs, puis utilisez les touches pour accéder aux valeurs:

(let au lieu de # dans la version bêta.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"
    }
  };
}
```
Plunker exemple

Voir aussi Sélectionnez en fonction de la enum dans Angular2
- Gunter - je voudrais afficher le nom d'utilisateur soit "propertyA" ou "propertyB'. J'ai donc besoin de changer le tuyau en quelque sorte
- Pas sûr de ce que vous voulez dire par là. Selon pas quels sont les critères que vous voulez montrer l'un ou l'autre?
- Pas sûr de ce exact cas d'utilisation que vous avez à l'esprit, mais je ne vois pas pourquoi quelque chose ne fonctionne pas avec des objets imbriqués.
- Cela peut-il être couplé avec async pipe si objs est asynchrone?
- Assurez-vous {{someObservable | async | ObjNgFor}}
- comment je peux accéder à la valeur de l'objet en asynchrone cas avec cette approche ?
InformationsquelleAutor Günter Zöchbauer

clés.la 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.le 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>

InformationsquelleAutor jadeallencook

0

pas utiliser des tubes à cela, il exemple
```
*ngFor="let Value bof Values; let i = index"

{{i}}
```
- Code complet serait utile au lieu de la partie.
InformationsquelleAutor HaiNM

Vous devez vous connecter pour publier un commentaire.