angular - template - ngfor object

¿Cómo iterar claves de objeto usando*ngFor?

Question

Estuve investigando y descubrí que puedo usar lo siguiente para usar * ngFor sobre un objeto:

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

donde ObjNgFor pipe es:

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

Sin embargo, cuando tengo un objeto como este:

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

No estoy muy seguro de cómo puedo extraer ''propertyA'' y ''propertyB'', para que sea accesible desde la directiva * ngFor. ¿Algunas ideas?

ACTUALIZAR

Lo que quiero hacer es presentar el siguiente HTML:

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

Donde algo sería igual a la propertyA y la propertyB (así es como se estructura el objeto). Entonces, esto llevaría a:

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

Answer 1

Actualizar

En 6.1.0- KeyValuePipe se introdujo KeyValuePipe https://github.com/angular/angular/pull/24319

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

Ejemplo de Plunker

Versión previa

Podrías probar algo como esto

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

Y luego en tu plantilla

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

Plunker

Answer 2

O, en lugar de crear una tubería y pasar un objeto a * ngFor, simplemente pase Object.keys(MyObject) a * ngFor. Devuelve lo mismo que la tubería, pero sin la molestia.

En el archivo TypeScript:

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

En plantilla (html):

*ngFor="let item of list"

Answer 3

Simplemente devuelva las claves de la tubería en lugar de los valores y luego use las claves para acceder a los valores:

( let lugar de # en 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"
    }
  };
}

Ejemplo de Plunker

Vea también Seleccionar basado en enumeración en Angular2

Answer 4

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

ejemplo.componente.html

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