Angular中*ngFor能否实现类似Python的每次迭代解包两个变量

实现方案 #

Angular的模板表达式支持ES6的解构语法，你需要的类似Python的迭代解包效果完全可以实现，有两种常用写法：

• 写法1：直接解构（最贴合你预期的写法）
  只需要把你示例里的语法调整为数组解构格式即可，不需要修改原keyValues变量：

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

  以上代码运行后会依次输出每组的两个数值，和Python的解包迭代效果一致。
• 写法2：下标取值（兼容性更强）
  如果你使用的Angular版本较低，不支持模板内解构语法，可以直接访问子数组的下标取值：

  <div *ngFor="let pair of keyValues">
    {{pair[0]}} and {{pair[1]}}
  </div>
  

内容的提问来源于stack exchange，提问作者yalpsid eman