如何使用 * ngFor 迭代对象键

小开

You have to create custom pipe.

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;
}}

And then use it in your *ngFor

*ngFor="let item of data | keyobject"

小开

最佳答案

Angular 6.0.0

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

introduced a 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

You can use a pipe

@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">

小开

If you are using a map() operator on your response,you could maybe chain a toArray() operator to it...then you should be able to iterate through newly created array...at least that worked for me :)

小开

i would do this:

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

小开

I think the most elegant way to do that is to use the javascript Object.keys like this (I had first implemented a pipe for that but for me, it just complicated my work unnecessary):

in the Component pass Object to template:

Object = Object;

then in the template:

<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>

If you have a lot of subobjects you should create a component that will print the object for you. By printing the values and keys as you want and on an subobject calling itselfe recursively.

Hier you can find an stackblitz demo for both methods.

小开

1.Create a custom pipe to get keys.

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


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


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

In angular template file, you can use *ngFor and iterate over your object object

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

小开

I know this question is already answered but I have one solution for this same.

You can also use Object.keys() inside of *ngFor to get required result.

I have created a demo on stackblitz. I hope this will help/guide to you/others.

CODE SNIPPET

HTML Code

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

.ts file code

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"
}

小开

Angular now has a type of iterate Object for exactly this scenario, called a Set. It fit my needs when I found this question searching. You create the set, "add" to it like you'd "push" to an array, and drop it in an ngFor just like an array. No pipes or anything.

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

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

小开

After doing a lot of troubleshooting nested loops in the template, I found that this worked better for my use:

(For one thing I was trying to iterate agm-polygon and it wouldn't let me nest divs).

In component.ts:

Object = Object


values= Object.values(this.arrayOfObjects)

In component.html:

<div *ngFor='let value of values'>\{\{value.property}}</div>

Once you retrieve the values, you do have an Iterable, and do not need to worry about also iterating through the keys in the template, which can get complex and look messy.

小开

Looping through object in Angular HTML templates

keyValuePipe is introduced in Angular: Please refer https://angular.io/api/common/KeyValuePipe

Quick code:

<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>