ngfor 一次解压 2 个变量答案

【问题标题】：ngfor unpacking 2 variables at a timengfor 一次解压 2 个变量
【发布时间】：2021-11-09 18:37:11
【问题描述】：

在 python 中，我可以在每次迭代时解压缩每个元组中的两个变量。

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

我想知道我是否可以在角度上做类似的事情。

假设我们有keyValues = [[1,2], [4,5], [8,9]] 有没有一种方法可以在每次迭代时解开每一对数字？比如：

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

【问题讨论】：

从当前的角度版本开始，您不能像这样在模板中解构。您可以做的是将您的数组数组转换为模板更友好的对象数组。
在 python 中，你有一个元组数组，而在 javascript 中，你有一个数组数组。有一个名为 keyValue 的管道，但它会破坏对象，而不是数组。
如果你总是期望一个在外部数组中有 2 个值的数组，你可以 *ngFor 覆盖外部数组并简单地通过索引直接寻址子数组。

标签： angular ngfor iterable-unpacking

【解决方案1】：

您可以将该数组转换为具有属性的对象（尽管我猜您已经从一个对象开始？）

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

有一个 Angular 管道可以用来提取键值对

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

【讨论】：