Iterieren Sie über das Objekt in Angular

Ich versuche einige Dinge in Angular 2 Alpha 28 zu tun und habe ein Problem mit Wörterbüchern und NgFor.

Ich habe eine Oberfläche in TypeScript, die so aussieht:

interface Dictionary {
    [ index: string ]: string
}

In JavaScript wird dies in ein Objekt übersetzt, das mit Daten folgendermaßen aussehen könnte:

myDict={'key1':'value1','key2':'value2'}

Ich möchte darüber iterieren und habe Folgendes versucht:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

Aber ohne Erfolg funktionierte auch keiner der folgenden Punkte:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

In allen Fällen erhalte ich Fehler wie "Unerwartetes Token" oder "IterableDiff-Pipe-unterstützendes Objekt kann nicht gefunden werden".

Was vermisse ich hier? Ist das nicht mehr möglich? (Die erste Syntax funktioniert in Angular 1.x) oder unterscheidet sich die Syntax für die Iteration über ein Objekt?

Es scheint, dass sie die Syntax von ng1 nicht unterstützen wollen.

Nach Miško Hevery ( Referenz ):

Karten haben keine Befehle in Schlüsseln und daher ist ihre Iteration nicht vorhersehbar. Dies wurde in ng1 unterstützt, aber wir denken, dass es ein Fehler war und in NG2 nicht unterstützt wird

Es ist geplant, eine mapToIterable-Pipe zu haben

<div *ngFor"var item of map | mapToIterable">

Um über Ihr Objekt zu iterieren, müssen Sie eine "Pipe" verwenden. Derzeit ist keine Pipe implementiert, die dies tut.

Um dieses Problem zu umgehen, finden Sie hier ein kleines Beispiel, das die Schlüssel durchläuft:

Komponente:

import {Component} from 'angular2/core';

@Component({
  selector: 'component',
  templateUrl: `
       <ul>
       <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
       </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }

  keys() : Array<string> {
    return Object.keys(this.myDict);
  }
}

interface Dictionary {
    [ index: string ]: string
}

Angular 6.1.0+ Antwort

Verwenden Sie das eingebaute keyvalueRohr wie folgt :

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

oder so:

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

Wo mySortingFunctionist in Ihrer .tsDatei zum Beispiel:

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

Stackblitz: https://stackblitz.com/edit/angular-iterate-key-value

Sie müssen dies in keinem Modul registrieren, da Angular Pipes in jeder Vorlage sofort funktionieren.

Es funktioniert auch für Javascript-Maps .

versuche dieses Rohr zu benutzen

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

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ngFor="#value of object | values"> </div>

Neben der Antwort von @ obscur finden Sie hier ein Beispiel dafür, wie Sie sowohl auf das keyals auch valueauf das @ View zugreifen können.

Rohr:

@Pipe({
   name: 'keyValueFilter'
})

export class keyValueFilterPipe {
    transform(value: any, args: any[] = null): any {

        return Object.keys(value).map(function(key) {
            let pair = {};
            let k = 'key';
            let v = 'value'


            pair[k] = key;
            pair[v] = value[key];

            return pair;
        });
    }

}

Aussicht:

<li *ngFor="let u of myObject | 
keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>

Wenn das Objekt also so aussehen würde:

myObject = {
    Daario: Naharis,
    Victarion: Greyjoy,
    Quentyn: Ball
}

Das generierte Ergebnis wäre:

Vorname: Daario
Nachname: Naharis

Vorname: Victarion
Nachname: Greyjoy

Vorname: Quentyn
Nachname: Ball

Aktualisiert: Angular stellt jetzt die Pipe zum Durchlaufen des JSON-Objekts bereit über keyvalue:

<div *ngFor="let item of myDict | keyvalue">
  {{item.key}}:{{item.value}}
</div>

WORKING DEMO und für weitere Informationen lesen Sie

Zuvor (für ältere Versionen): Bis jetzt war die beste / kürzeste Antwort, die ich gefunden habe, (ohne Rohrfilter oder benutzerdefinierte Funktion von der Komponentenseite)

Komponentenseite:

objectKeys = Object.keys;

Vorlagenseite:

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

ARBEITSDEMO

Hinzufügen zu SimonHawesome ' ausgezeichneter Antwort . Ich habe eine prägnante Version erstellt, die einige der neuen Typoskriptfunktionen verwendet. Mir ist klar, dass die Version von SimonHawesome absichtlich ausführlich ist, um die zugrunde liegenden Details zu erklären. Ich habe auch eine Early-Out-Prüfung hinzugefügt, damit die Pipe für falsche Werte funktioniert . ZB wenn die Karte istnull .

Beachten Sie, dass die Verwendung einer Iterator-Transformation (wie hier ausgeführt) effizienter sein kann, da kein Speicher für ein temporäres Array zugewiesen werden muss (wie in einigen anderen Antworten beschrieben).

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

@Pipe({
    name: 'mapToIterable'
})
export class MapToIterable implements PipeTransform {
    transform(map: { [key: string]: any }, ...parameters: any[]) {
        if (!map)
            return undefined;
        return Object.keys(map)
            .map((key) => ({ 'key': key, 'value': map[key] }));
    }
}

Hier ist eine Variation einiger der oben genannten Antworten, die mehrere Transformationen (Schlüsselwert, Schlüssel, Wert) unterstützt:

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

type Args = 'keyval'|'key'|'value';

@Pipe({
  name: 'mapToIterable',
  pure: false
})
export class MapToIterablePipe implements PipeTransform {
  transform(obj: {}, arg: Args = 'keyval') {
    return arg === 'keyval' ?
        Object.keys(obj).map(key => ({key: key, value: obj[key]})) :
      arg === 'key' ?
        Object.keys(obj) :
      arg === 'value' ?
        Object.keys(obj).map(key => obj[key]) :
      null;
  }
}

Verwendung

map = {
    'a': 'aee',
    'b': 'bee',
    'c': 'see'
}

<div *ngFor="let o of map | mapToIterable">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let o of map | mapToIterable:'keyval'">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let k of map | mapToIterable:'key'">{{k}}</div>
  <div>a</div>
  <div>b</div>
  <div>c</div>

<div *ngFor="let v of map | mapToIterable:'value'">{{v}}</div>
  <div>aee</div>
  <div>bee</div>
  <div>see</div>

Ich hatte ein ähnliches Problem, baute etwas für Objekte und Karten.

import { Pipe } from 'angular2/core.js';

/**
 * Map to Iteratble Pipe
 * 
 * It accepts Objects and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 * 
 * Example:
 * 
 *  <div *ngFor="#keyValuePair of someObject | mapToIterable">
 *    key {{keyValuePair.key}} and value {{keyValuePair.value}}
 *  </div>
 * 
 */
@Pipe({ name: 'mapToIterable' })
export class MapToIterable {
  transform(value) {
    let result = [];
    
    if(value.entries) {
      for (var [key, value] of value.entries()) {
        result.push({ key, value });
      }
    } else {
      for(let key in value) {
        result.push({ key, value: value[key] });
      }
    }

    return result;
  }
}

Angular 2.x && Angular 4.x unterstützen dies nicht sofort

Sie können diese beiden Pipes verwenden, um entweder nach Schlüssel oder nach Wert zu iterieren .

Schlüsselrohr:

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

@Pipe({
  name: 'keys',
  pure: false
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value)
  }
}

Wertepipe:

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

@Pipe({
  name: 'values',
  pure: false
})
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key])
  }
}

Wie benutzt man:

let data = {key1: 'value1', key2: 'value2'}

<div *ngFor="let key of data | keys"></div>
<div *ngFor="let value of data | values"></div>

Wenn sich jemand fragt, wie man mit mehrdimensionalen Objekten arbeitet, ist hier die Lösung.

Nehmen wir an, wir haben folgendes Objekt in Betrieb

getChallenges() {
    var objects = {};
    objects['0'] = { 
        title: 'Angular2', 
        description : "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    };

    objects['1'] = { 
        title: 'AngularJS', 
        description : "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    };

    objects['2'] = { 
        title: 'Bootstrap',
        description : "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    };
    return objects;
}

Fügen Sie in der Komponente die folgende Funktion hinzu

challenges;

constructor(testService : TestService){
    this.challenges = testService.getChallenges();
}
keys() : Array<string> {
    return Object.keys(this.challenges);
}

Endlich im Blick folgen

<div *ngFor="#key of keys();">
    <h4 class="heading">{{challenges[key].title}}</h4>
    <p class="description">{{challenges[key].description}}</p>
</div>

Ich habe mir die Haare ausgerissen, als ich versucht habe, Daten zu analysieren und zu verwenden, die von einem JSON-Abfrage- / API-Aufruf zurückgegeben wurden. Ich bin mir nicht sicher, wo genau ich falsch gelaufen bin. Ich habe das Gefühl, dass ich die Antwort seit Tagen umkreise und verschiedene Fehlercodes wie:

"Kann 'iterableDiff'-Pipe-unterstützendes Objekt nicht finden"

"Generisches TYpe-Array erfordert ein oder mehrere Argumente"

JSON-Analysefehler und andere sicher

Ich gehe davon aus, dass ich gerade die falsche Kombination von Korrekturen hatte.

Hier ist eine kurze Zusammenfassung der Fallstricke und Dinge, nach denen gesucht werden muss.

Überprüfen Sie zunächst das Ergebnis Ihrer API-Aufrufe. Ihre Ergebnisse können in Form eines Objekts, eines Arrays oder eines Arrays von Objekten vorliegen.

Ich werde nicht zu viel darauf eingehen. Es reicht zu sagen, dass der ursprüngliche Fehler des OP, nicht iterierbar zu sein, im Allgemeinen dadurch verursacht wird, dass Sie versuchen, ein Objekt und kein Array zu iterieren.

Hier sind einige meiner Debugging-Ergebnisse, die Variablen sowohl von Arrays als auch von Objekten zeigen

Da wir unser JSON-Ergebnis im Allgemeinen iterieren möchten, müssen wir sicherstellen, dass es die Form eines Arrays hat. Ich habe zahlreiche Beispiele ausprobiert und vielleicht wusste ich, was ich jetzt weiß, einige davon würden tatsächlich funktionieren, aber der Ansatz, den ich gewählt habe, bestand darin, eine Pipe zu implementieren, und der Code, den ich verwendete, war der von t.888 gepostete

   transform(obj: {[key: string]: any}, arg: string) {
if (!obj)
        return undefined;

return arg === 'keyval' ?
    Object.keys(obj).map((key) => ({ 'key': key, 'value': obj[key] })) :
  arg === 'key' ?
    Object.keys(obj) :
  arg === 'value' ?
    Object.keys(obj).map(key => obj[key]) :
  null;

Ehrlich gesagt denke ich, eines der Dinge, die mich dazu gebracht haben, war das Fehlen einer Fehlerbehandlung, indem ich den Aufruf 'return undefined' hinzufügte, von dem ich glaube, dass wir jetzt zulassen, dass nicht erwartete Daten an die Pipe gesendet werden, was offensichtlich in meinem Fall vorkam .

Wenn Sie sich nicht mit Argumenten für die Pipe befassen möchten (und ich denke, dass dies in den meisten Fällen nicht notwendig ist), können Sie einfach Folgendes zurückgeben

       if (!obj)
          return undefined;
       return Object.keys(obj);

Einige Hinweise zum Erstellen Ihrer Pipe und Seite oder Komponente, die diese Pipe verwendet

Ich habe Fehler erhalten, dass 'name_of_my_pipe' nicht gefunden wurde

Verwenden Sie den Befehl 'ionic generate pipe' von der CLI, um sicherzustellen, dass die Rohrmodule.ts korrekt erstellt und referenziert werden. Stellen Sie sicher, dass Sie der Seite mypage.module.ts Folgendes hinzufügen.

import { PipesModule } from ‘…/…/pipes/pipes.module’;

(Sie sind sich nicht sicher, ob sich dies ändert, wenn Sie auch über ein eigenes custom_module verfügen. Möglicherweise müssen Sie es auch zur custommodule.module.ts hinzufügen.)

Wenn Sie den Befehl 'ionic generate page' verwendet haben, um Ihre Seite zu erstellen, diese Seite jedoch als Hauptseite verwenden möchten, denken Sie daran, den Seitenverweis aus app.module.ts zu entfernen (hier ist eine weitere Antwort, die ich dazu veröffentlicht habe https : / /forum.ionicframework.com/t/solved-pipe-not-found-in-custom-component/95179/13?u=dreaser

Bei meiner Suche nach Antworten gab es eine Reihe von Möglichkeiten, die Daten in der HTML-Datei anzuzeigen, und ich verstehe nicht genug, um die Unterschiede zu erklären. In bestimmten Szenarien ist es möglicherweise besser, sie übereinander zu verwenden.

            <ion-item *ngFor="let myPost of posts">
                  <img src="https://somwhereOnTheInternet/{{myPost.ImageUrl}}"/>
                  <img src="https://somwhereOnTheInternet/{{posts[myPost].ImageUrl}}"/>
                  <img [src]="'https://somwhereOnTheInternet/' + myPost.ImageUrl" />
            </ion-item>

Was jedoch funktionierte, das es mir ermöglichte, sowohl den Wert als auch den Schlüssel anzuzeigen, war Folgendes:

    <ion-list>  
      <ion-item *ngFor="let myPost of posts  | name_of_pip:'optional_Str_Varible'">

        <h2>Key Value = {{posts[myPost]}} 

        <h2>Key Name = {{myPost}} </h2>

      </ion-item>
   </ion-list>  

Um den API-Aufruf durchzuführen, müssen Sie HttpModule in app.module.ts importieren

import { HttpModule } from '@angular/http';
 .
 .  
 imports: [
BrowserModule,
HttpModule,

und Sie benötigen HTTP auf der Seite, von der aus Sie den Anruf tätigen

import {Http} from '@angular/http';

Wenn Sie den API-Aufruf ausführen, scheinen Sie in der Lage zu sein, auf zwei verschiedene Arten auf die untergeordneten Daten (die Objekte oder Arrays innerhalb des Arrays) zuzugreifen. Beide scheinen zu funktionieren

entweder während des Anrufs

this.http.get('https://SomeWebsiteWithAPI').map(res => res.json().anyChildren.OrSubChildren).subscribe(
        myData => {

oder wenn Sie die Daten Ihrer lokalen Variablen zuweisen

posts: Array<String>;    
this.posts = myData['anyChildren'];

(Ich bin mir nicht sicher, ob diese Variable ein Array-String sein muss, aber das ist es, was ich jetzt habe. Es kann als allgemeinere Variable funktionieren.)

Und zum Schluss war es nicht notwendig, die eingebaute JSON-Bibliothek zu verwenden. Diese beiden Aufrufe können jedoch nützlich sein, um von einem Objekt in einen String zu konvertieren und umgekehrt

        var stringifiedData = JSON.stringify(this.movies);                  
        console.log("**mResults in Stringify");
        console.log(stringifiedData);

        var mResults = JSON.parse(<string>stringifiedData);
        console.log("**mResults in a JSON");
        console.log(mResults);

Ich hoffe, diese Zusammenstellung von Informationen hilft jemandem.

//Get solution for ng-repeat    
//Add variable and assign with Object.key

    export class TestComponent implements OnInit{
      objectKeys = Object.keys;
      obj: object = {
        "test": "value"
        "test1": "value1"
        }
    }
    //HTML
      <div *ngFor="let key of objectKeys(obj)">
        <div>
          <div class="content">{{key}}</div>
          <div class="content">{{obj[key]}}</div>
        </div>

In JavaScript wird dies in ein Objekt übersetzt, das mit Daten möglicherweise so aussieht

Schnittstellen in TypeScript sind ein Entwicklungszeitkonstrukt (nur zum Werkzeugieren ... 0 Auswirkungen auf die Laufzeit). Sie sollten dasselbe TypeScript wie Ihr JavaScript schreiben.

Das Wörterbuch ist ein Objekt, kein Array. Ich glaube, ng-repeat erfordert ein Array in Angular 2.

Die einfachste Lösung wäre, eine Pipe / einen Filter zu erstellen, die das Objekt im laufenden Betrieb in ein Array konvertiert. Das heißt, Sie möchten wahrscheinlich ein Array verwenden, wie @basarat sagt.

Wenn Sie es6-shimoder Ihr tsconfig.jsonZiel haben es6, können Sie ES6 Map verwenden , um es zu erstellen .

var myDict = new Map();
myDict.set('key1','value1');
myDict.set('key2','value2');

<div *ngFor="let keyVal of myDict.entries()">
    key:{{keyVal[0]}}, val:{{keyVal[1]}}
</div>

Definieren Sie die MapValuesPipeund implementieren Sie PipeTransform :

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

@Pipe({name: 'mapValuesPipe'})
export class MapValuesPipe implements PipeTransform {
    transform(value: any, args?: any[]): Object[] {
        let mArray: 
        value.forEach((key, val) => {
            mArray.push({
                mKey: key,
                mValue: val
            });
        });

        return mArray;
    }
}

Fügen Sie Ihr Rohr in Ihr Rohrmodul ein. Dies ist wichtig, wenn Sie dasselbe Rohr in mehr als einer Komponente verwenden müssen :

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MapValuesPipe
  ],
  declarations: [..., MapValuesPipe, ...]
})
export class PipesAggrModule {}

Dann verwenden Sie einfach die Pipe in Ihrem HTML mit *ngFor:

<tr *ngFor="let attribute of mMap | mapValuesPipe">

Denken Sie daran, dass Sie Ihr PipesModule in der Komponente deklarieren müssen, in der Sie die Pipe verwenden möchten:

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}

Also wollte ich meine eigene Hilfsfunktion, objLength (obj), implementieren, die nur Object (obj) .keys.length zurückgibt. Als ich es dann zu meiner template * ngIf-Funktion hinzufügte, schlug meine IDE objectKeys () vor. Ich habe es versucht und es hat funktioniert. Nach seiner Deklaration scheint es von lib.es5.d.ts angeboten zu werden, also los geht's!

So habe ich es implementiert (ich habe ein benutzerdefiniertes Objekt, das serverseitig generierte Schlüssel als Index für Dateien verwendet, die ich hochgeladen habe):

        <div *ngIf="fileList !== undefined && objectKeys(fileList).length > 0">
          <h6>Attached Files</h6>
          <table cellpadding="0" cellspacing="0">
            <tr *ngFor="let file of fileList | keyvalue">
              <td><a href="#">{{file.value['fileName']}}</a></td>
              <td class="actions">
                <a title="Delete File" (click)="deleteAFile(file.key);">
                </a>
              </td>
            </tr>
          </table>
        </div>