Javascript 有角度的分页符
我已经尝试使用对象数组创建页面，现在我可以使用下面的代码来分解页面。 我的数组将是这样的Javascript 有角度的分页符,javascript,arrays,angular,typescript,Javascript,Arrays,Angular,Typescript,我已经尝试使用对象数组创建页面，现在我可以使用下面的代码来分解页面。 我的数组将是这样的 [ { "id": 1, "content": "abc", "checked":true }, { "id": 2, "content": "xyz", "checked":true }, { "id": 3, "content": "xyz", "checked":true }, { "id":
[
{
"id": 1,
"content": "abc",
"checked":true
},
{
"id": 2,
"content": "xyz",
"checked":true
},
{
"id": 3,
"content": "xyz",
"checked":true
},
{
"id": 4,
"content": "xyz"
}
]
createPageNos() {
var newPageContentLength = 0;
var pageNo = 1;
var pageObj = {
page: `page${pageNo}`,
data: []
};
let temp = [];
this.contentArray.map(function (item) {
if (item.checked) {
temp.push(item);
}
})
this.contentViewArray = [];
temp.forEach((item, i) => {
newPageContentLength += item.content.length;
if (i == 0) {
pageObj.data.push({ ...item, ischecked: true });
} else {
if (newPageContentLength < 5000) {
pageObj.data.push({ ...item, ischecked: true });
} else {
this.contentViewArray.push({ ...pageObj });
pageNo += 1;
pageObj = {
page: `page${pageNo}`,
data: [{ ...item, ischecked: true }]
};
newPageContentLength = item.content.length;
}
}
if (i == temp.length - 1) {
this.contentViewArray.push({ ...pageObj });
}
});
}
createPageNos（）{
var newPageContentLength=0；
var pageNo=1；
var pageObj={
页面：`page${pageNo}`，
数据：[]
};
设temp=[]；
this.contentArray.map（函数（项）{
如果（选中项）{
温度推送（项目）；
}
})
this.contentViewArray=[]；
每小时温度（（项目，i）=>{
newPageContentLength+=item.content.length；
如果（i==0）{
push（{…项，ischecked:true}）；
}否则{
如果（newPageContentLength<5000）{
push（{…项，ischecked:true}）；
}否则{
this.contentViewArray.push（{…pageObj}）；
pageNo+=1；
pageObj={
页面：`page${pageNo}`，
数据：[{…项，已检查：true}]
};
newPageContentLength=item.content.length；
}
}
如果（i==温度长度-1）{
this.contentViewArray.push（{…pageObj}）；
}
});
}
第三个对象1000个字符必须转到第1页，其他2000个字符必须转到第二页。这不会发生。有人能帮我解决这个问题吗您忘了对第三个对象的拆分进行编码 我不确定是否理解你，我从你的例子中了解到你想做这样的事情：
[
{
id: 1,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
},
{
id: 2,
content: "xyz"
},
{
id: 3,
content: "xyz"
},
{
id: 8,
content: "xyz"
},
{
id: 9,
content: "xyz"
},
{
id: 10,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
}
];
[
{
"page": "page1",
"data": [
{
"id": 1,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page2",
"data": [
{
"id": 1,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page3",
"data": [
{
"id": 1,
"content": "bcabc",
"checked": true
},
{
"id": 2,
"content": "xyz",
"checked": true
},
{
"id": 3,
"content": "xyz",
"checked": true
},
{
"id": 8,
"content": "xyz",
"checked": true
},
{
"id": 9,
"content": "xyz",
"checked": true
},
{
"id": 10,
"content": "abc",
"checked": true
}
]
},
{
"page": "page4",
"data": [
{
"id": 10,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page5",
"data": [
{
"id": 10,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page6",
"data": [
{
"id": 10,
"content": "bc",
"checked": true
}
]
}
]
[
{
id: 1,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
},
{
id: 2,
content: "xyz"
},
{
id: 3,
content: "xyz"
},
{
id: 8,
content: "xyz"
},
{
id: 9,
content: "xyz"
},
{
id: 10,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
}
];
[
{
"page": "page1",
"data": [
{
"id": 1,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page2",
"data": [
{
"id": 1,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page3",
"data": [
{
"id": 1,
"content": "bcabc",
"checked": true
},
{
"id": 2,
"content": "xyz",
"checked": true
},
{
"id": 3,
"content": "xyz",
"checked": true
},
{
"id": 8,
"content": "xyz",
"checked": true
},
{
"id": 9,
"content": "xyz",
"checked": true
},
{
"id": 10,
"content": "abc",
"checked": true
}
]
},
{
"page": "page4",
"data": [
{
"id": 10,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page5",
"data": [
{
"id": 10,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page6",
"data": [
{
"id": 10,
"content": "bc",
"checked": true
}
]
}
]
private NB_BY_PAGE = 20;
viewArray = [];
constructor() {
var newPageContentLength = 0;
var pageNo = 1;
var pageObj = {
page: `page${pageNo}`,
data: []
};
this.originalArray.forEach((item, i) => {
[pageObj, newPageContentLength, pageNo] = this.cutInPages(item, pageObj, newPageContentLength, pageNo);
if (i == this.originalArray.length - 1) {
this.viewArray.push({ ...pageObj });
}
});
}
private cutInPages(item, pageObj, newPageContentLength, pageNo) {
let numberNeededToCompleteCurrentPage = this.NB_BY_PAGE - newPageContentLength;
if (item.content.length <= numberNeededToCompleteCurrentPage) {
pageObj.data.push({ ...item, checked: true });
newPageContentLength += item.content.length;
return [pageObj, newPageContentLength, pageNo]
} else {
let firstPartItem = {id:item.id, content: item.content.substr(0, numberNeededToCompleteCurrentPage), checked: true};
pageObj.data.push({ ...firstPartItem, checked: true });
this.viewArray.push({ ...pageObj });
pageNo += 1;
pageObj = {
page: `page${pageNo}`,
data: []
};
newPageContentLength = 0
let secundPartItem = {id:item.id,
content: item.content.substr(numberNeededToCompleteCurrentPage, item.content.length), checked: true};
return this.cutInPages(secundPartItem, pageObj, newPageContentLength, pageNo);
}
}
private NB_BY_PAGE=20；
viewArray=[]；
构造函数（）{
var newPageContentLength=0；
var pageNo=1；
var pageObj={
页面：`page${pageNo}`，
数据：[]
};
this.originalArray.forEach（（项目，i）=>{
[pageObj，newPageContentLength，pageNo]=此.cutInPages（项，pageObj，newPageContentLength，pageNo）；
if（i==this.originalArray.length-1）{
this.viewArray.push（{…pageObj}）；
}
});
}
专用cutInPages（项目、pageObj、newPageContentLength、pageNo）{
让numbernededtocompletecurrentpage=this.NB_BY_PAGE-newPageContentLength；
如果（item.content.length忘记对第三个对象的分割进行编码
我不确定是否理解你，我从你的例子中了解到你想做这样的事情：
[
{
id: 1,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
},
{
id: 2,
content: "xyz"
},
{
id: 3,
content: "xyz"
},
{
id: 8,
content: "xyz"
},
{
id: 9,
content: "xyz"
},
{
id: 10,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
}
];
[
{
"page": "page1",
"data": [
{
"id": 1,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page2",
"data": [
{
"id": 1,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page3",
"data": [
{
"id": 1,
"content": "bcabc",
"checked": true
},
{
"id": 2,
"content": "xyz",
"checked": true
},
{
"id": 3,
"content": "xyz",
"checked": true
},
{
"id": 8,
"content": "xyz",
"checked": true
},
{
"id": 9,
"content": "xyz",
"checked": true
},
{
"id": 10,
"content": "abc",
"checked": true
}
]
},
{
"page": "page4",
"data": [
{
"id": 10,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page5",
"data": [
{
"id": 10,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page6",
"data": [
{
"id": 10,
"content": "bc",
"checked": true
}
]
}
]
变成20个字符的页面，如下所示：
[
{
id: 1,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
},
{
id: 2,
content: "xyz"
},
{
id: 3,
content: "xyz"
},
{
id: 8,
content: "xyz"
},
{
id: 9,
content: "xyz"
},
{
id: 10,
content: "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabc"
}
];
[
{
"page": "page1",
"data": [
{
"id": 1,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page2",
"data": [
{
"id": 1,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page3",
"data": [
{
"id": 1,
"content": "bcabc",
"checked": true
},
{
"id": 2,
"content": "xyz",
"checked": true
},
{
"id": 3,
"content": "xyz",
"checked": true
},
{
"id": 8,
"content": "xyz",
"checked": true
},
{
"id": 9,
"content": "xyz",
"checked": true
},
{
"id": 10,
"content": "abc",
"checked": true
}
]
},
{
"page": "page4",
"data": [
{
"id": 10,
"content": "abcabcabcabcabcabcab",
"checked": true
}
]
},
{
"page": "page5",
"data": [
{
"id": 10,
"content": "cabcabcabcabcabcabca",
"checked": true
}
]
},
{
"page": "page6",
"data": [
{
"id": 10,
"content": "bc",
"checked": true
}
]
}
]
为了好玩，我使用了一个递归函数：）在stackBlitz示例中试试这个
private NB_BY_PAGE = 20;
viewArray = [];
constructor() {
var newPageContentLength = 0;
var pageNo = 1;
var pageObj = {
page: `page${pageNo}`,
data: []
};
this.originalArray.forEach((item, i) => {
[pageObj, newPageContentLength, pageNo] = this.cutInPages(item, pageObj, newPageContentLength, pageNo);
if (i == this.originalArray.length - 1) {
this.viewArray.push({ ...pageObj });
}
});
}
private cutInPages(item, pageObj, newPageContentLength, pageNo) {
let numberNeededToCompleteCurrentPage = this.NB_BY_PAGE - newPageContentLength;
if (item.content.length <= numberNeededToCompleteCurrentPage) {
pageObj.data.push({ ...item, checked: true });
newPageContentLength += item.content.length;
return [pageObj, newPageContentLength, pageNo]
} else {
let firstPartItem = {id:item.id, content: item.content.substr(0, numberNeededToCompleteCurrentPage), checked: true};
pageObj.data.push({ ...firstPartItem, checked: true });
this.viewArray.push({ ...pageObj });
pageNo += 1;
pageObj = {
page: `page${pageNo}`,
data: []
};
newPageContentLength = 0
let secundPartItem = {id:item.id,
content: item.content.substr(numberNeededToCompleteCurrentPage, item.content.length), checked: true};
return this.cutInPages(secundPartItem, pageObj, newPageContentLength, pageNo);
}
}
private NB_BY_PAGE=20；
viewArray=[]；
构造函数（）{
var newPageContentLength=0；
var pageNo=1；
var pageObj={
页面：`page${pageNo}`，
数据：[]
};
this.originalArray.forEach（（项目，i）=>{
[pageObj，newPageContentLength，pageNo]=此.cutInPages（项，pageObj，newPageContentLength，pageNo）；
if（i==this.originalArray.length-1）{
this.viewArray.push（{…pageObj}）；
}
});
}
专用cutInPages（项目、pageObj、newPageContentLength、pageNo）{
让numbernededtocompletecurrentpage=this.NB_BY_PAGE-newPageContentLength；
如果（item.content.length无法获取分页符后面的逻辑>您是否可以共享stackblitz的编辑器url以进行分叉？@MoxxiManagarm@PrashantPimpale添加了屏幕快照添加有关逻辑的正确解释：）无法理解：页面限制为上述代码中的每页5000个字符，如果3个对象具有3000和1000个字符，并且3000个字符，则第一个和第二个对象将进入第一页，3000个字符的第三个对象将完全进入第二页。第三个对象1000个字符必须进入第1页，其他2000个字符必须进入第二页。
U无法获取分页符背后的逻辑>您可以共享stackblitz的编辑器url以进行分页符吗？@MoxxiManagarm@PrashantPimpale添加了屏幕快照添加关于逻辑的正确解释：）无法理解：如果3个对象具有3000和1000以及3000个字符，则上述代码的页面限制为每页5000个字符，第一个和第二个对象将进入第一页，第三个对象（3000个字符）将完全进入第二页。第三个对象（1000个字符）必须进入第1页，其他2000个字符必须进入第二页。
能否添加stackblitz linkGot sol解决方案添加您的代码并以预期的完美方式工作。祝您好运。能否添加stackblitz linkGot sol我添加了你的代码，并以预期的完美状态工作。祝你好运。