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


    <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);
      }
    }
  • 相关阅读:
    SRM146 DIV1 600
    SRM145 DIV1 1000
    SRM146 DIV1 300
    SRM145 DIV1 600
    【HTML打卡】0115 margin重叠、内联元素、css控制段落
    【HTML打卡】0114 盒模型margin、border、padding
    【HTML打卡】0113 div布局,css控制
    【HTML打卡】0112-html发展、doctype声明
    Machine Learning结课感想
    【ACM打卡】ZOJ 1045 2722 2830
  • 原文地址:https://www.cnblogs.com/yuyedaocao/p/11008042.html
Copyright © 2020-2023  润新知