将一维数组转化成二维数组

 

<nz-table #colSpanTable [nzData]="temp" nzBordered>
  <tbody>
    <ng-container *ngFor="let row of temp;let i = index">   
      <tr>
        <td *ngFor="let title of row">{{title.AreaCodesName}}</td>
      </tr>
      <tr>
        <td *ngFor="let item of row">
          <div *ngFor="let content of item.Employees" nz-row nzType="flex" >
              <div>{{ content }}</div>
          </div>
        </td>
      </tr>
    </ng-container>
  </tbody>
</nz-table>

import { Component, OnInit } from \'@angular/core\';
import { STComponent, STColumn, STData, STChange, STPage, STColumnTag } from \'@delon/abc\';
import ja_JP from \'ng-zorro-antd/i18n/languages/ja_JP\';
@Component({
  selector: \'app-card-whole-consume\',
  templateUrl: \'./card-whole-consume.component.html\',
  styleUrls: [\'./card-whole-consume.component.css\']
})
export class CardWholeConsumeComponent implements OnInit {
  data: any[] = [];
  areaList: any[] = [];
  rows;
  temp ;
  constructor() { }
  ngOnInit() {
    this.data = [
      {
        AreaCodesName: \'东北地区\',
        Employees: [\'吉林省\', \'辽宁省\', \'黑龙江省\', \'黑龙江省\'],
      },
      {
        AreaCodesName: \'华东地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
      {
        AreaCodesName: \'西北地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
      {
        AreaCodesName: \'东南地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
      {
        AreaCodesName: \'华南地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
      {
        AreaCodesName: \'华北地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
      {
        AreaCodesName: \'西南地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
      {
        AreaCodesName: \'华中地区\',
        Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
      },
    ];
    this.setArrData(this.data);
    // 将上面数组转化成二维数组：
    // this.temp = [[{
    //   AreaCodesName: \'东北地区\',
    //   Employees: [\'吉林省\', \'辽宁省\', \'黑龙江省\', \'黑龙江省\'],
    //   ContentName: [\'苹果\', \'梨子\', \'葡萄\']
    // },
    // {
    //   AreaCodesName: \'华东地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // },
    // {
    //   AreaCodesName: \'西北地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // },
    // {
    //   AreaCodesName: \'东南地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // }], [{
    //   AreaCodesName: \'华南地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // },
    // {
    //   AreaCodesName: \'华北地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // },
    // {
    //   AreaCodesName: \'西南地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // },
    // {
    //   AreaCodesName: \'华中地区\',
    //   Employees: [\'安徽省\', \'江苏省\', \'山东省\'],
    //   ContentName: [\'香蕉\', \'梨子\', \'葡萄\']
    // }]];

  }
  // 将一维数组转化成二维数组
  setArrData(arr) {
    let num = Math.ceil(arr.length / 4);  // 2
    this.temp = new Array(num);
    for (let i = 0; i < num; i++) {
      this.temp[i] = this.data.slice(i*4, i*4+3);
    }
    // 规律： i*4  i*4+3
    // this.temp[0] = this.data.slice(0, 3);
    // this.temp[1] = this.data.slice(4, 7);
    // this.temp[2] = this.data.slice(8, 11);
    // this.temp[3] = this.data.slice(12, 15);
    // this.temp[4] = this.data.slice(16, 19);
  }
}