ngfor unpacking 2 variables at a time-CodePudding

In python I can do this to unpack both variables in each tuple at each iteration.

l = [(1, 2), (4, 5), (8, 9)]
for k,v in l:
     print("k = ", k)
     print("v = ", v)
     print("-------")

#   k =  1
#   v =  2
#   -------
#   k =  4
#   v =  5
#   -------
#   k =  8
#   v =  9
#   -------

I'm trying to figure out if I can do something similar in angular.

Say we have keyValues = [[1,2], [4,5], [8,9]] Is there a way we can unpack each pair of numbers at each iteration? Something like:

<div *ngFor="let k, v of keyValues">{{k}} and {{v}}</div>

CodePudding user response：

You could convert that array to an object with properties (although I'm guessing you're already starting with an object?)

const keyValues = [[1,2], [4,5], [8,9]]
const obj = Object.fromEntries(keyValues)

There's an Angular pipe that can be used to extract the key value pairs

<div *ngFor="let item of obj | keyvalue">
    {{item.key}}:{{item.value}}
</div>