Javascript 如何根据TypeScript中给定的数字对对象数组的元素进行分组

我有一个角度项目的要求。我有一个对象数组。它包含6个对象。我想把第一组的3个放在一个组里，另一组的3个放在另一个组里。数组是

staticKpi

。我的逻辑是：

  staticKpi=[{},{},{},{},{},{}];
  ...
  createGrouping() {
    var chunks = [],
      i = 0,
      n = this.staticKpi.length;
    while (i < n) {
      chunks.push(this.staticKpi.slice(i, (i += 3)));
    }
    this.staticKpi = chunks;
  }

但我没有得到正确的输出。这是我的建议。 请纠正我的错误。

它应该可以帮助您：

constfoo=[1,2,3,4,5,6,7,8,9]
常数计数=3；
const len=foo.length/3；
函数拆分为（arr）{
返回数组（len）.fill（0）.reduce（（acc，u，index）=>[…acc，arr.slice（index*3，index*3+3）]，[]）
}
常量结果=拆分为（foo）/[[1,2,3]、[4,5,6]、[7,8,9]；

我没有考虑长度不除以3的数组。但是不难理解如何处理它

函数createGrouping（arrData）{
function createGrouping(arrData) {
    let result = [];
    let arr3 = [];
    arrData.forEach(item => {
        if(arr3.length < 3) {
            arr3.push(item);
        } else if(arr3.length === 3) {
            result.push([...arr3]);
            arr3 = [];
        }
    });
    result = arr3.length > 0 ? result.push([...arr3]) : result;
    return result;
}

让结果=[]；
设arr3=[]；
arrData.forEach（项目=>{
如果（arr3.长度<3）{
arr3.推送（项目）；
}else if（arr3.length==3）{
结果：推送（[…arr3]）；
arr3=[]；
}
});
结果=arr3.length>0？结果。推送（[…arr3]）：结果；
返回结果；
}

根据您的stackblitz样本

import { Component, OnInit, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  staticKpi2: {
    kpi: string;
    headerString: string;
    footerString: string;
  }[] = [];

  staticKpi: {
    kpi: string;
    headerString: string;
    footerString: string;
  }[][] = [];

  breakPoint = 3;

  ngOnInit() {
    this.populateObject();
  }

  populateObject() {
    this.staticKpi2.push(
      ...[
        {
          kpi: "SpO2",
          headerString: "High: 97 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "Temperature",
          headerString: "High: 100.4 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "BP",
          headerString: "High: 140/90 ",
          footerString: "Low: 90/60"
        },
        {
          kpi: "Respiratoin",
          headerString: "High: 25 per min",
          footerString: "Low: 10 per min"
        },
        {
          kpi: "Pulse rate",
          headerString: "High: 100 and above",
          footerString: "Low: 50 and below"
        },
        {
          kpi: "D-Dimer",
          headerString: "Negative: 0.50 and Less",
          footerString: "Positive: Greater than 0.50"
        }
      ]
    );
    // console.log(this.staticKpi);
    this.createGrouping();
  }

  createGrouping() {
    for (let i = 0; i < this.staticKpi2.length; i += this.breakPoint) {
      this.staticKpi.push([...this.staticKpi2].splice(i, this.breakPoint));
    }
    console.log(this.staticKpi);
  }
}

从“@angular/core”导入{Component，OnInit，VERSION}”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent实现OnInit{
name=“Angular”+VERSION.major；
静态KPI2：{
kpi：字符串；
头字符串：字符串；
footerString：字符串；
}[] = [];
静态KPI：{
kpi：字符串；
头字符串：字符串；
footerString：字符串；
}[][] = [];
断点=3；
恩戈尼尼特（）{
this.populateObject（）；
}
populateObject（）{
这个是.staticKpi2.push(
...[
{
kpi：“SpO2”，
headerString:“高：97及以上”，
页脚字符串：“低：94及以下”
},
{
kpi：“温度”，
headerString:“高：100.4及以上”，
页脚字符串：“低：94及以下”
},
{
kpi：“BP”，
标题字符串：“高：140/90”，
页脚字符串：“低：90/60”
},
{
kpi：“呼吸素”，
头串：“高：每分钟25次”，
页脚字符串：“低：每分钟10”
},
{
kpi：“脉冲率”，
标题字符串：“高：100及以上”，
页脚字符串：“低：50及以下”
},
{
kpi：“D-二聚体”，
标题字符串：“负：0.50及以下”，
footerString:“正：大于0.50”
}
]
);
//console.log（this.staticKpi）；
这是createGrouping（）；
}
createGrouping（）{
for（设i=0；i

类型“number | any[]”不能分配给类型“any[]”。类型“number”不能分配给类型“any[]”。

它正在抱怨

result=arr.length

。最后一行代码

import { Component, OnInit, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  staticKpi2: {
    kpi: string;
    headerString: string;
    footerString: string;
  }[] = [];

  staticKpi: {
    kpi: string;
    headerString: string;
    footerString: string;
  }[][] = [];

  breakPoint = 3;

  ngOnInit() {
    this.populateObject();
  }

  populateObject() {
    this.staticKpi2.push(
      ...[
        {
          kpi: "SpO2",
          headerString: "High: 97 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "Temperature",
          headerString: "High: 100.4 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "BP",
          headerString: "High: 140/90 ",
          footerString: "Low: 90/60"
        },
        {
          kpi: "Respiratoin",
          headerString: "High: 25 per min",
          footerString: "Low: 10 per min"
        },
        {
          kpi: "Pulse rate",
          headerString: "High: 100 and above",
          footerString: "Low: 50 and below"
        },
        {
          kpi: "D-Dimer",
          headerString: "Negative: 0.50 and Less",
          footerString: "Positive: Greater than 0.50"
        }
      ]
    );
    // console.log(this.staticKpi);
    this.createGrouping();
  }

  createGrouping() {
    for (let i = 0; i < this.staticKpi2.length; i += this.breakPoint) {
      this.staticKpi.push([...this.staticKpi2].splice(i, this.breakPoint));
    }
    console.log(this.staticKpi);
  }
}