Wie Objektschlüssel mit * ngFor?

Question

Ich habe zu graben um, und fand heraus, dass ich die folgenden verwenden kann * ngFor über ein Objekt zu verwenden:

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

wo ObjNgFor Rohr ist:

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

jedoch, wenn ich ein Objekt wie folgt:

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

ich bin nicht ganz sicher, wie ich ‚propertyâ‘ extrahieren und ‚propertyB‘, so dass sie durch die zugänglich von * ngFor Rich ist e. Irgendwelche Ideen?

UPDATE

Was ich tun möchte, ist die folgende HTML zu präsentieren:

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

Wo etwas propertyA und propertyB gleich wäre (dies ist, wie das Objekt strukturiert ist). Also, das würde zu:

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

Answer 1

Sie so etwas wie dieses

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

könnten versuchen, und dann auf die Vorlage

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

Plunker

Answer 2

Gerade Rück die Schlüssel aus dem Rohr anstelle der Werte und dann die Tasten verwenden, um die Werte zugreifen:

(let statt # in der 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" 
    } 
    }; 
} 

Plunker example

Siehe auch Select based on enum in Angular2

Answer 3

Oder stattdessen ein Rohr und Übergang zu schaffen ein Objekt an * ngFor, einfach pas s Object.keys(MyObject) zu * ngFor. Es liefert das gleiche wie die Pfeife, aber ohne den Ärger.

Auf Typoskript-Datei:

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

Auf Vorlage (HTML):

*ngFor="let item of list"