javascript - 将数组显示为分页 View

Question

我正在尝试使用 ngFor 将对象数组显示为 Angular PPT View 页面。为此，我准备了一个临时对象，它运行良好，并且可以将其显示为页面。

临时对象:

let data = [
      {
        "page": "page1",
        "data": [
          {
            "id": "1",
            "content": "abc",
            "checked": true
          },
          {
            "id": "2",
            "content": "xyz",
            "checked": true
          }
        ]
      },
      {
        "page": "page2",
        "data": [
          {
            "id": "3",
            "content": "abc",
            "checked": true
          },
          {
            "id": "4",
            "content": "xyz",
            "checked": true
          }
        ]
      }
    ]

但是，使用我的原始数组，我无法转换为相同的格式

原始数组

[
  {
    "id": 1,
    "content": "abc"
  },
   {
    "id": 2,
    "content": "xyz"
  },
   {
    "id": 3,
    "content": "xyz"
  },
   {
    "id": 4,
    "content": "xyz"
  }
]

根据内容长度，我必须创建页码并使用 ngfor 在 html 中显示对象，例如如果object1和object2长度超过1000，那么我必须只显示page1中长度小于1000的object1和page2中的object2，我尝试根据它进行转换关于内容长度，但我一直坚持这一点。

到目前为止我尝试过的:

this.templateArray.map((item) => {
      var a = item.content.length;
      this.totallength = this.totallength + a;
      if (this.totallength >= 500) {

        this.totallength = [];
      }
      dataobj = [{
        "page": pageNo,
        "data": [
          {
            "content": item.content
          }
        ]
      }];
      temp.push(dataobj);
    })

任何帮助都会很棒......

Answer 1

你可以尝试这样的事情:

<强> Working Demo

  constructor() {
    var newPageContentLength = 0;
    var pageNo = 1;
    var pageObj = {
      page: `page${pageNo}`,
      data: []
    };

    this.originalArray.forEach((item, i) => {
      newPageContentLength += item.content.length;
      if (i == 0) {
        pageObj.data.push({ ...item, checked: true });
      } else {
        if (newPageContentLength < 20) {
          pageObj.data.push({ ...item, checked: true });
        } else {
          this.viewArray.push({ ...pageObj });
          pageNo += 1;
          pageObj = {
            page: `page${pageNo}`,
            data: [{ ...item, checked: true }]
          };
          newPageContentLength = item.content.length;
        }
      }
      if (i == this.originalArray.length - 1) {
          this.viewArray.push({ ...pageObj });
      }
    });
  }

注意:这只是一个页面最大内容长度为20的示例。您可以根据需要修改/重构该功能