如何在 for-of 或 map array.slice 中转换 for 循环 whit array.slice 以生成 col 和 row？

Question

我在 Angular8 中遇到了问题。 我需要将数组的for循环转换for for-of或array.map 。

我有这个代码，我传递了一个对象数组，我需要将它分成 col 和 row 数组以进行可视化。

    private pages = [];
    public grid = [];
    public col = 2;
    public row = 2;
    public indexPage = 0;
    private gridSize = this.col * this.row;
    private items = [
        {
          url:'http://url1',
          name:'1',
          active: false,
        },
        {
          url:'http://url2',
          name:'2',
          active: false,
        },
        {
          url:'http://url3',
          name:'3v',
          active: false,
        },
        {
          url:'http://url4',
          name:'4v',
          active: false,
        },
        {
          url:'http://url5',
          name:'5v',
          active: false,
        },
        {
          url:'http://url6',
          name:'6v',
          active: false,
        },
        {
          url:'http://url7',
          name:'7v',
          active: false,
        },
      ]
ngOnInit() {
    if(this.col === 0 || this.row === 0) {
      this.grid = this.items;
    }else {
      for (let i = 0; i < this.items.length; i+= this.gridSize) {
         let page = this.items.slice(i , i+this.gridSize);
         this.pages.push(page);
      }
      for (let i = 0; i < this.pages.length; i++) {
        let pageUrl = [];
        for(let j = 0; j < this.pages[i].length; j+=this.col) {
          let urls = this.pages[i].slice(j , j+this.col);
          pageUrl.push(urls);
        }
        this.grid.push(pageUrl);
      }
    }
  }

我从对象 whit col = 2 的输出； 行 = 2; ：

pages --> (2) [Array(4), Array(3)]             // 2 pages
              --> (0) [{...},{...},{...},{...}] // 1st page - 4 elemet
              --> (1) [{...},{...},{...}]       // 2nd page - 3 element


grid --> (2) [Array(2), Array(2)]
            -->(0) [Array(2), Array(2)]   // page1 - 2 row
                   --> (0)[{...},]{...}]    // 2 col x row
                   --> (1)[{...},]{...}]    // 2 col x row
           --> (1) [Array(2),Array(1)]   // page 2 - 2row
                   --> (0)[{...},{...}]     // 2 col x row
                   --> (1)[{...}] .        // 1col x row

输出是正确的，但 tslint 给了我一个 for 循环错误：

通过这个简单的迭代，期望使用“for-of”循环而不是“for”循环

ps ：行和列是可定制的

Answer 1

这是将循环转换为 for-of 循​​环的方法：

    private pages = [];
    public grid = [];
    public col = 2;
    public row = 2;
    public indexPage = 0;
    private gridSize = this.col * this.row;
    private items = [
        {
          url:'http://url1',
          name:'1',
          active: false,
        },
        {
          url:'http://url2',
          name:'2',
          active: false,
        },
        {
          url:'http://url3',
          name:'3v',
          active: false,
        },
        {
          url:'http://url4',
          name:'4v',
          active: false,
        },
        {
          url:'http://url5',
          name:'5v',
          active: false,
        },
        {
          url:'http://url6',
          name:'6v',
          active: false,
        },
        {
          url:'http://url7',
          name:'7v',
          active: false,
        },
      ]
ngOnInit() {
    if(this.col === 0 || this.row === 0) {
      this.grid = this.items;
    }else {
      for (let item of this.items) {
         let itemIndex = this.items.indexOf(item);
         let page = this.items.slice(itemIndex , itemIndex+this.gridSize);
         this.pages.push(page);
      }
      for (let iPage of this.pages) {
        let pageUrl = [];
        let j = 0;
        for(let jPage of iPage.length) {
          let urls = iPage.slice(j , j+this.col);
          pageUrl.push(urls);
          j+=this.col;
        }
        this.grid.push(pageUrl);
      }
    }
  }