Here's my object (It has n number of dynamic keys. I've only shown two in the example below)
let obj = {
abc:["some text", "some more text"],
xyz:["more text", "what do you think?", "I'm tired now"]
}
Here's my attempt to loop throw the above and print all the values
<div *ngFor='let item of obj ; let i = index;'>
<p *ngFor="let value of obj.i">{{value}}
</div>
But the above doesn't appear to work. What am I doing wrong and what's the correct syntax?
You could do something like this:
<li *ngFor="let o of obj">
<p *ngFor="let objArrayElement of generateArray(o)"> {{objArrayElement}} </p>
</li>
where generateArray looks like:
generateArray(obj){
return Object.keys(obj).map((key)=>{ return obj[key]});
}
slight modification to @eg16's answer and it worked like a charm for me -
the generateArray function looks like this-
generateArray(obj){
return Object.keys(obj).map((key)=>{ return {key:key, value:obj[key]}});
}
and the template -
<li *ngFor="let item of generateArray(data)">{{item.key}}: {{item.value}}</li>
Starting with version 6.1, a KeyValue Pipe is made available by Angular:
<li *ngFor="let item of (data | keyvalue)">{{item.key}}: {{item.value}}</li>
This makes previous workarounds using Object.keys references or own implementations thereof obsolete.
obj[i]instead ofobj.i?