Sono un po 'confuso su come ottenere il keye valuedi un oggetto in angular2 mentre lo uso *ngForper iterare sull'oggetto. So che in 1.x angolare c'è una sintassi simile

ng-repeat="(key, value) in demo"

ma non so come fare lo stesso in angular2. Ho provato qualcosa di simile, senza successo:

<ul>
  <li *ngFor='#key of demo'>{{key}}</li>
</ul>

demo = {
    'key1': [{'key11':'value11'}, {'key12':'value12'}],
    'key2': [{'key21':'value21'}, {'key22':'value22'}],
  }

Ecco un plnkr con il mio tentativo: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

Come posso ottenere key1e key2utilizzare in modo dinamico *ngFor? Dopo aver cercato a fondo, ho trovato l'idea di usare le pipe ma non so come procedere. Esiste un tubo integrato per fare lo stesso in angular2?

Accedi Object.keysal modello e usalo in *ngFor.

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;
  items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
  constructor(){}
}

Come nell'ultima versione di Angular (v6.1.0) , Angular Team ha aggiunto una nuova pipe incorporata per lo stesso nome di keyvaluepipe per aiutarti a scorrere attraverso oggetti, mappe e matrici, nel commonmodulo del pacchetto angolare. Per esempio -

<div *ngFor="let item of testObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

Esempio di Fork Fork funzionante

controlla qui per ulteriori informazioni utili -

• https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
• https://github.com/angular/angular/commit/2b49bf7

Se stai usando Angular v5 o inferiore o vuoi ottenere usando pipe segui questa risposta

• chiave d'accesso e valore dell'oggetto usando ngfor

È possibile creare una pipe personalizzata per restituire l'elenco di chiavi per ciascun elemento. Qualcosa del genere:

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

e usalo così:

<tr *ngFor="let c of content">           
  <td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>

modificare

È inoltre possibile restituire una voce contenente sia chiave che valore:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

e usalo così:

<span *ngFor="let entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

Aggiornare

In 6.1.0-beta.1 è stato introdotto KeyValuePipe https://github.com/angular/angular/pull/24319

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

Esempio di Plunker

Versione precedente

Un altro approccio è quello di creare una NgForIndirettiva che verrà utilizzata come:

<div *ngFor="let key in obj">
   <b>{{ key }}</b>: {{ obj[key] }}
</div>

Esempio di Plunker

ngforin.directive.ts

@Directive({
  selector: '[ngFor][ngForIn]'
})
export class NgForIn<T> extends NgForOf<T> implements OnChanges {

  @Input() ngForIn: any;

  ngOnChanges(changes: NgForInChanges): void {
    if (changes.ngForIn) {
      this.ngForOf = Object.keys(this.ngForIn) as Array<any>;

      const change = changes.ngForIn;
      const currentValue = Object.keys(change.currentValue);
      const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined;
      changes.ngForOf =  new SimpleChange(previousValue, currentValue, change.firstChange);

      super.ngOnChanges(changes);
    }
  }
}

Da Angular 6.1 è possibile utilizzare la pipe del valore chiave :

<div *ngFor="let item of testObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

Ma ha l'inconveniente che ordina l'elenco risultante in base al valore chiave. Se hai bisogno di qualcosa di neutrale:

@Pipe({ name: 'keyValueUnsorted', pure: false  })
export class KeyValuePipe implements PipeTransform {
  transform(input: any): any {
    let keys = [];
    for (let key in input) {
      if (input.hasOwnProperty(key)) {
        keys.push({ key: key, value: input[key]});
      }
    }
    return keys;
  }
}

Non dimenticare di specificare l' attributo pure: false pipe. In questo caso, la pipe viene invocata ad ogni ciclo di rilevamento delle modifiche, anche se il riferimento di input non è cambiato (come nel caso dell'aggiunta di proprietà a un oggetto).

Elaborazione della risposta di @ Thierry con l'esempio.

Non esiste alcun pipe o metodo integrato da ottenere key and valuedal ciclo * ngFor. quindi dobbiamo creare pipe personalizzate per lo stesso. come ha detto Thierry, ecco la risposta con il codice.

** La classe pipe implementa il metodo di trasformazione dell'interfaccia PipeTransform che accetta un valore di input e un array opzionale di stringhe di parametri e restituisce il valore trasformato.

** Il metodo di trasformazione è essenziale per una pipe. L'interfaccia PipeTransform definisce tale metodo e guida sia gli strumenti che il compilatore. È facoltativo; Angular cerca ed esegue il metodo di trasformazione a prescindere. per maggiori informazioni riguardo pipe consultare qui

import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

@Component({
    selector: 'my-app',
    templateUrl: 'mytemplate.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
    pipes: [KeysPipe]
})
export class AppComponent { 

  demo = {
    'key1': 'ANGULAR 2',
    'key2': 'Pardeep',
    'key3': 'Jain',
  }
}


@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

e la parte HTML è:

<ul>
  <li *ngFor='#key of demo | keys'>
   Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

Working Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

aggiornamento a RC

come suggerito dall'utente6123723 (grazie) nel commento ecco l'aggiornamento.

<ul>
  <li *ngFor='let key of demo | keys'>
   Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

@Marton ha sollevato un'obiezione importante alla risposta accettata in quanto il pipe crea una nuova raccolta su ogni rilevamento di modifica. Vorrei invece creare un HtmlService che fornisce una gamma di funzioni di utilità che la vista può utilizzare come segue:

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>`
})
export class MyComponent {
  items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'};
  constructor(private html: HtmlService){}
}

@Injectable()
export class HtmlService {
  keys(object: {}) {
    return Object.keys(object);
  }
  // ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others...
}

Se stai già utilizzando Lodash, puoi fare questo semplice approccio che include sia la chiave che il valore:

<ul>
  <li *ngFor='let key of _.keys(demo)'>{{key}}: {{demo[key]}}</li>
</ul>

Nel file dattiloscritto, includere:

import * as _ from 'lodash';

e nel componente esportato, includere:

_: any = _;

Grazie per il tubo, ma ho dovuto apportare alcune modifiche prima di poterlo utilizzare in angolare 2 RC5. Modificata la riga di importazione Pipe e aggiunto anche il tipo di qualsiasi all'inizializzazione dell'array di chiavi.

 import {Pipe, PipeTransform} from '@angular/core';

 @Pipe({name: 'keys'})
 export class KeysPipe implements PipeTransform {
 transform(value) {
   let keys:any = [];
   for (let key in value) {
      keys.push( {key: key, value: value[key]} );
    }
     return keys;
  }
}

Nessuna delle risposte qui ha funzionato per me fuori dalla scatola, ecco cosa ha funzionato per me:

Crea pipes/keys.tscon i contenuti:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
    transform(value:any, args:string[]): any {
        let keys:any[] = [];
        for (let key in value) {
            keys.push({key: key, value: value[key]});
        }
        return keys;
    }
}

Aggiungi a app.module.ts(il tuo modulo principale):

import { KeysPipe } from './pipes/keys';

e quindi aggiungi al tuo array di dichiarazioni del modulo qualcosa del genere:

@NgModule({
    declarations: [
        KeysPipe
    ]
})
export class AppModule {}

Quindi nel tuo modello di visualizzazione puoi usare qualcosa del genere:

<option *ngFor="let entry of (myData | keys)" value="{{ entry.key }}">{{ entry.value }}</option>

Ecco un buon riferimento che ho trovato se vuoi leggere di più.

C'è una vera libreria che lo fa tra le altre belle pipe. Si chiama ngx-pipes .

Ad esempio, keys pipe restituisce le chiavi per un oggetto e valori pipe restituisce i valori per un oggetto:

tubo di chiavi

<div *ngFor="let key of {foo: 1, bar: 2} | keys">{{key}}</div> 
<!-- Output: 'foo' and 'bar -->

valori pipe

<div *ngFor="let value of {foo: 1, bar: 2} | values">{{value}}</div>
<!-- Output: 1 and 2 -->

Non c'è bisogno di creare la tua pipa personalizzata :)

Usa indice:

<div *ngFor="let value of Objects; index as key">

Uso:

{{key}} -> {{value}}

Ecco la soluzione semplice

Per questo puoi usare iteratori dattiloscritti

import {Component} from 'angular2/core';
declare var Symbol;
@Component({
    selector: 'my-app',
    template:`<div>
    <h4>Iterating an Object using Typescript Symbol</h4><br>
Object is : <p>{{obj | json}}</p>
</div>
============================<br>
Iterated object params are:
<div *ngFor="#o of obj">
{{o}}
</div>

`
})
export class AppComponent {
  public obj: any = {
    "type1": ["A1", "A2", "A3","A4"],
    "type2": ["B1"],
    "type3": ["C1"],
    "type4": ["D1","D2"]
  };

  constructor() {
    this.obj[Symbol.iterator] =  () => {
          let i =0;

          return {
            next: () => {
              i++;
              return {
                  done: i > 4?true:false,
                  value: this.obj['type'+i]
              }
            }
          }
    };
  }
}

http://plnkr.co/edit/GpmX8g?p=info

cambiare il tipo di demo in array o iterare sull'oggetto e passare a un altro array

public details =[];   
Object.keys(demo).forEach(key => {
      this.details.push({"key":key,"value":demo[key]);
    });

e da HTML:

<div *ngFor="obj of details">
  <p>{{obj.key}}</p>
  <p>{{obj.value}}</p>
  <p></p>
</div>

Penso che Object.keys sia la migliore soluzione a questo problema. Per chiunque trovi questa risposta e stia cercando di scoprire perché Object.keys sta dando loro ['0', '1'] invece di ['key1', 'key2'], un avvertimento: fai attenzione alla differenza tra " di "e" in ":

Stavo già usando Object.keys, qualcosa di simile a questo:

interface demo {
    key: string;
    value: string;
}

createDemo(mydemo: any): Array<demo> {
    const tempdemo: Array<demo> = [];

    // Caution: use "of" and not "in"
    for (const key of Object.keys(mydemo)) {
        tempdemo.push(
            { key: key, value: mydemo[key]}
        );
    }

    return tempdemo;
}

Tuttavia, invece di

for (const key OF Object.keys(mydemo)) {

Avevo inavvertitamente scritto

for (const key IN Object.keys(mydemo)) {

che "ha funzionato" perfettamente bene senza alcun errore e restituito

[{key: '0', value: undefined}, {key: '1', value: undefined}]

Questo mi è costato circa 2 ore googling e imprecazioni ..

(schiaffeggia la fronte)

puoi ottenere la chiave dell'oggetto dinamico provandola

myObj['key']

Devi farlo così per ora, non lo so molto efficiente in quanto non vuoi convertire l'oggetto che ricevi dalla base di fuoco.

    this.af.database.list('/data/' + this.base64Email).subscribe(years => {
        years.forEach(year => {

            var localYears = [];

            Object.keys(year).forEach(month => {
                localYears.push(year[month])
            });

            year.months = localYears;

        })

        this.years = years;

    });