Comment itérer les clés d'objet en utilisant * ngFor?
j'ai creusé autour, et j'ai découvert que je peux utiliser le suivant 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 la *ngFor directive. Des idées?
UPDATE
ce que je veux faire, c'est présenter le 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é). Ainsi, cela conduirait à:
propertyA:this is the propertyA
propertyB:this is the propertyB
4 réponses
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>
précédente version
vous pourriez 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 puis sur votre modèle
<div *ngFor="let obj of objs | ObjNgFor">
{{obj.key}} - {{obj.description}}
</div>
ou au lieu de créer une pipe et de passer un objet à *ngFor, il suffit de passer Object.keys(MyObject) à *ngFor. Il retourne la même que la pipe, mais sans les tracas.
Sur Tapuscrit de fichier:
let list = Object.keys(MyObject); // good old javascript on the rescue
Sur le modèle (html):
*ngFor="let item of list"
il suffit de retourner les clés du tuyau au lieu des valeurs et ensuite utiliser les clés pour accéder aux valeurs:
( let au lieu de # dans le 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"
}
};
}
Voir aussi sélectionner sur la base de enum en Angular2
clés.tuyau.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
]
})
exemple.composant.html
<elem *ngFor="let item of obj | keys" id="{{ item.key }}">
{{ item.value }}
</elem>