I am a bit confused about how to get the key
and value
of an object in angular2 while using *ngFor
for iterating over the object. I know in angular 1.x there is a syntax like
ng-repeat="(key, value) in demo"
but I don't know how to do the same in angular2. I have tried something similar, without success:
<ul> <li *ngFor='#key of demo'>{{key}}</li> </ul> demo = { 'key1': [{'key11':'value11'}, {'key12':'value12'}], 'key2': [{'key21':'value21'}, {'key22':'value22'}], }
Here is a plnkr with my attempt: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
How can I get key1
and key2
dynamically using *ngFor
? After searching extensively, I found the idea of using pipes but I don't know how to go about it. Is there any inbuilt pipe for doing the same in angular2?
The ngFor directive accepts any object that implements the Iterable interface. You can read more about iterators here. So, for example, we can create our own iterable and just give it to the ngFor directive.
The KeyValue Pipe converts given Object or Map into an array of key-value pairs. We can use this with the ngFor to loop through the object keys. The keyValue accepts the one argument compareFn , which we can use to set the custom sort to the pipe.
The *ngFor directive is used to repeat a portion of HTML template once per each item from an iterable list (Collection). The ngFor is an Angular structural directive and is similar to ngRepeat in AngularJS. Some local variables like Index, First, Last, odd and even are exported by *ngFor directive.
KeyValuePipelinkTransforms Object or Map into an array of key value pairs. {{ input_expression | keyvalue [ : compareFn ] }}
As in latest release of Angular (v6.1.0) , Angular Team has added new built in pipe for the same named as keyvalue
pipe to help you iterate through objects, maps, and arrays, in the common
module of angular package. For example -
<div *ngFor="let item of testObject | keyvalue"> Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b> </div>
To keep original order, use keyvalue:onCompare
,
and in component define callback:
// ... import {KeyValue} from '@angular/common'; @Component(/* ... */) export class MyComponent { private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number { return -1; } }
check it out here for more useful information -
If you are using Angular v5 or below or you want to achieve using pipe follow this answer
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With