Angular 如何通过迭代typescript中的数组和标签中的分组项来填充MenuItem？

我有以下数组：

array = [
    {active: true, category: "Category A", name: "One A"}, 
    {active: true, category: "Category B", name: "One B"}, 
    {active: true, category: "Category A", name: "Two A"}, 
    {active: true, category: "Category B", name: "Two B"}];

我想循环此阵列并构建以下菜单项：

menuItems = [
      {
          label: 'Category A',
          items: [
            {label: 'One A'},
            {label: 'Two A'}
        ]
      },
      {
          label: 'Category B',
          items: [
            {label: 'One B'},
            {label: 'Two B'}
        ]
      }
    ];

我从

array.forEach((item) => {
    if(item.active) {
        menuItems.push({})            
    }
});

我想我必须知道如何使用标签作为钥匙，但我不知道如何使用。我搜索了一段时间，得到的最接近的结果是，但这里他们正在用ul和li构建菜单，我只想将数组（menuItem）绑定到一个p-tieredMenu（来自PrimeNG）

你们能帮帮我吗？我先谢谢你

更新：我试图输出结果，看看我是否知道如何实现我的目标：

if (value) {
    value.forEach((item) => {
        if(item.active) {
            // this.addFieldItems.push({})            
            console.log('category: ' + item.category + '\nname: ' + item.name);
        }
    });
}   

我发现困难的是如何将正确的项目推到正确的位置。现在，我可以通过将每个对象推送到menuitem数组来填充列表，方法是如何对其进行分组，以便每个类别都有子类别

更新：
我几乎有了它，但我得到了一个未定义错误的无法读取属性：

if (value) {
  let catArray: any = [];
  value.forEach((item) => {
    if(item.active) {
      if (catArray.indexOf(item.category) < 0) {
        catArray.push(item.category);
      }
    }
  });
  catArray.forEach((cat: any) => {
    let arrItems: any = [];
    value.forEach((item) => {
      if(item.category == cat) {
        arrItems.push(
          { label: item.name
          }
        );
      }
    });
    this.addFieldItems.push({label: cat, items: arrItems});
  });
}

if（值）{
让catArray:any=[]；
value.forEach（（项目）=>{
如果（项目激活）{
if（目录索引（项目类别）<0）{
catArray.push（项目类别）；
}
}
});
catArray.forEach（（类别：任意）=>{
让项目：any=[]；
value.forEach（（项目）=>{
如果（item.category==cat）{
推(
{label:item.name
}
);
}
});
this.addFieldItems.push（{label:cat，items:arrhitems}）；
});
}

在上面的代码中，value是原始数组，addFieldItems是所需的数组。这里有什么错误？

使用Array.reduce（）将一个结构映射到另一个结构 为了在平面结构（原始数组）中每个元素上存在的某个键下的新数组中将值分组在一起，我们需要执行以下操作：

• 遍历原始数组中的每个元素
• 检查分组属性项在输出数组中的位置
• 将我们的项目添加为子项目
• 如果分组项不存在，我们将一个新项推送到输出数组中，创建分组

为此，我们将利用和

函数flatToMenuStructure（flatArray）{
返回flatArray.reduce（（输出，项）=>{
如果（项目激活）{
//我们将当前项分组到哪个数组项下。
let index=out.findIndex（e=>e.label==item.category）；
//如果索引为-1，则第一次看到此类别。
如果（索引==-1）{
推({
标签：item.category，
项目：[]
});
索引=out.length-1；
}
//将菜单项添加到类别。
out[index].items.push({
标签：item.name
})
}
返回；
}, []);
}

我没有继续编写代码，因为我知道我做不到。我希望你不是那个意思。学习编码就是要尝试。让我们看看你做了什么，并解释为什么你被卡住了。我知道我最终能做到。我想先提取类别，然后像那样填充我的结果数组。除了将平面数组转换为嵌套结构之外，我真的不知道你在问什么？然而，这可以通过使用Reduce来实现。