将数组显示为分页视图

Question

我正在尝试使用 Angular PPT 视图页面来显示对象数组ngFor。为此，我准备了一个临时对象，它工作正常，我能够将其显示为页面。

临时对象：

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"
  }
]

根据内容长度，我必须创建页码并使用 html 显示对象ngfor，例如，如果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

你可以尝试这样的事情：

工作演示

  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的示例。您可以根据需要修改/重构该功能