Question

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

临时对象：

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和object2的长度小于1000的object1，而我尝试根据内容长度对其进行转换，坚持下去。

到目前为止我尝试过的事情：

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

将数组显示为分页视图

1 个答案: