angular - 当对象数组与上一个不同时，如何迭代对象数组并更改组标签？

Question

我有一个如下所示的对象数组:

[
  {group_label: Colors, label: Red, value: '1'},
  {group_label: Colors, label: Green, value: '2'},
  {group_label: Sizes, label: S, value: '3'},
  {group_label: Sizes, label: M, value: '4'},
  {group_label: Sizes, label: L, value: '5'}
]

我想用 *ngFor 迭代它并得到这个结果:

Colors:
  Red: 1
  Green: 2
Sizes:
  S: 3
  M: 4
  L: 5

我的问题是，如何在每个“部分”开始时仅显示一次 group_label 。我无法将这些对象重新格式化为更适合此任务的内容，因为它们是 FormArrays 中的 Angulars FormGroup。

Answer 1

我认为使用两个 ngFor 并制作自定义管道或具有按功能分组的函数的唯一可能方法。之后，您可以使用第二个 ngFor 写出您的键值对。

最不优雅的方法是通过索引引用前一个元素，然后检查 group_label 是否不同并为其创建一个新部分。在这种情况下，您的数组必须已经排序!