So iterieren Sie Objektschlüssel mit * ngFor

Ich möchte [Objektobjekt] mit * ngFor in Angular 2 iterieren.

Das Problem ist, dass das Objekt kein Array eines Objekts ist, sondern ein Objekt des Objekts, das weitere Objekte enthält.

{

  "data": {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "03215110224",
    "role": null,
    "email": "test@example.com",
    "picture": **{ <-- I want to get thumb: url but not able to fetch that**
      "url": null,
      "thumb": {
        "url": null
      }
    },
    "address": "Nishtar Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
  }
}

Ich weiß, dass wir Pipe verwenden können, um das Objekt zu iterieren, aber wie wir weiter von Objekt zu Objekt iterieren können, bedeutet Daten-> Bild-> Thum: URL .

Winkel 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

eingeführt a KeyValuePipe

Siehe auch https://angular.io/api/common/KeyValuePipe

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

Original

Sie können eine Pfeife verwenden

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

<div *ngFor="let key of objs | keys">

Siehe auch So iterieren Sie Objektschlüssel mit * ngFor?

Ich denke, der eleganteste Weg, dies zu tun, besteht darin, das Javascript Object.keyswie folgt zu verwenden (ich hatte zuerst eine Pipe dafür implementiert, aber für mich hat es meine Arbeit nur unnötig kompliziert gemacht):

Übergeben Sie im Objekt Objekt an Vorlage:

Object = Object;

dann in der Vorlage:

<div *ngFor="let key of Object.keys(objs)">
   my key: {{key}}
   my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>

Wenn Sie viele Unterobjekte haben, sollten Sie eine Komponente erstellen, die das Objekt für Sie druckt. Durch Drucken der Werte und Schlüssel nach Belieben und in einem Unterobjekt, das sich selbst rekursiv aufruft.

Hier finden Sie eine Stackblitz-Demo für beide Methoden.

Ich weiß, dass diese Frage bereits beantwortet ist, aber ich habe eine Lösung dafür.

Sie können auch Object.keys()inside of verwenden *ngFor, um das gewünschte Ergebnis zu erhalten.

Ich habe eine Demo auf stackblitz erstellt . Ich hoffe, dies wird Ihnen / anderen helfen.

CODE-AUSZUG

HTML Quelltext

<div *ngFor="let key of Object.keys(myObj)">
  <p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>

.ts Dateicode

Object = Object;

myObj = {
    "id": 834,
    "first_name": "GS",
    "last_name": "Shahid",
    "phone": "1234567890",
    "role": null,
    "email": "test@example.com",
    "picture": {
        "url": null,
        "thumb": {
            "url": null
        }
    },
    "address": "XYZ Colony",
    "city_id": 2,
    "provider": "email",
    "uid": "test@example.com"
}

Sie müssen eine benutzerdefinierte Pipe erstellen.

import { Injectable, Pipe } from '@angular/core';
@Pipe({
   name: 'keyobject'
})
@Injectable()
export class Keyobject {

transform(value, args:string[]):any {
    let keys = [];
    for (let key in value) {
        keys.push({key: key, value: value[key]});
    }
    return keys;
}}

Und dann verwenden Sie es in Ihrem * ngFor

*ngFor="let item of data | keyobject"

1.Erstellen Sie eine benutzerdefinierte Pipe, um Schlüssel abzurufen.

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

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

2. In einer eckigen Vorlagendatei können Sie * ngFor verwenden und über Ihr Objektobjekt iterieren

<div class ="test" *ngFor="let key of Obj | keys">
    {{key}}
    {{Obj[key].property}
<div>

Angular verfügt jetzt über eine Art iteriertes Objekt für genau dieses Szenario, das als Set bezeichnet wird. Es passte zu meinen Bedürfnissen, als ich diese Frage suchend fand. Sie erstellen das Set, "fügen" es hinzu, als würden Sie es in ein Array "pushen", und legen es wie ein Array in einem ngFor ab. Keine Rohre oder so.

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

<ul>
   <li *ngFor="let object of myObjList">
     {{object}}
   </li>
</ul>

Wenn Sie map()für Ihre Antwort einen Operator verwenden, können Sie möglicherweise einen toArray()Operator daran verketten ... dann sollten Sie in der Lage sein, das neu erstellte Array zu durchlaufen ... zumindest hat das bei mir funktioniert :)

Ich würde das tun:

<li *ngFor="let item of data" (click)='onclick(item)'>{{item.picture.url}}</li>