將一維數組轉化成二維數組

 

<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);
  }
}