angular - Hvordan iterere objektnøkler ved å bruke *ngFor?

Jeg har gravd litt, og funnet ut at jeg kan bruke følgende for å bruke *ngFor over et objekt:

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

hvor ObjNgFor-pipe er:

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

Men når jeg har et objekt som dette:

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

Jeg er ikke helt sikker på hvordan jeg kan hente ut 'propertyA' og 'propertyB', slik at det er tilgjengelig fra *ngFor-direktivet. Noen ideer?

OPPDATERING

Det jeg ønsker å gjøre, er å presentere følgende HTML:

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

Hvor noe ville være lik propertyA og propertyB (slik objektet er strukturert). Så, dette ville føre til:

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

Svar #1

Eller i stedet for å lage et pipe og sende et objekt til *ngFor, bare send Object.keys(MyObject) til *ngFor. Det returnerer det samme som pipe-en, men uten bryet.

På TypeScript-fil:

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

På mal (html):

*ngFor="let item of list"

Svar #2

Oppdater

I 6.1.0-beta.1 ble KeyValuePipe introdusert https://github.com/angular/angular/pull/24319

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

Plunker-eksempel

Forrige versjon

Du kan prøve noe sånt som dette

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

Og deretter på malen din

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

Plunker

Svar #3

Bare returner nøklene fra røret i stedet for verdiene, og bruk deretter nøklene for å få tilgang til verdiene:

(let i stedet for # i 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"
    }
  };
}