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": "[email protected]",
"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": "[email protected]"
}
}
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 .
Antworten:
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
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?
quelle
[src]="posts[key].thumb.url"
?Ich denke, der eleganteste Weg, dies zu tun, besteht darin, das Javascript
Object.keys
wie 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:
dann in der Vorlage:
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.
quelle
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
quelle
Sie müssen eine benutzerdefinierte Pipe erstellen.
Und dann verwenden Sie es in Ihrem * ngFor
quelle
quelle
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.
...
...
quelle
myObjList
? Als ich es versuchte, sagte mein Linter:Type 'Set<any>' is not assignable to type 'IMyInterface'
Wenn Sie
map()
für Ihre Antwort einen Operator verwenden, können Sie möglicherweise einentoArray()
Operator daran verketten ... dann sollten Sie in der Lage sein, das neu erstellte Array zu durchlaufen ... zumindest hat das bei mir funktioniert :)quelle
Ich würde das tun:
quelle