简单矩阵数据构造

ゝ一纸荒年。 2021-07-24 23:02 355阅读 0赞

**第一种方式：** 将图片一中的数据格式转为图片二数据格式。  
![图片一][20190911175645223.png]  
![图片二][2019091117572122.png]  
代码如下：

mixtrixList=[];
      mixtrix=[
      1,2,3,4,5,6,
      7,8,9,10,11,12,
      13,14,15,16,17,18,
      19,20,21,22,23,24,
      25,26,27,28,29,30,
      31,32,33,34,35,36
      ];//转换成6*6
      ngOnInit(): void {
        this.mixtrixList=this.processMixArray();
        console.log(this.mixtrix,this.mixtrixList);
    }
    processMixArray(){
      const temp = []
      this.mixtrix.forEach((item, index) => {
        const tempIndex = Math.floor(index / 6)
        if (!temp[tempIndex]) {
          temp[tempIndex] = []
        }
        temp[tempIndex].push(item)
      })
      return temp
    }

**第二种方式**:自己写一个6\*6的矩阵数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70]  
图中蓝色方块代表选中true，其余为未选择false

创建6\*6的矩阵数据打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 1]

let arr =\[0,7,19,18,24,30\],数组中数代表6\*6矩阵中的位置设置为true选中，其他为false.  
mixtrixComponent.ts

arr =[0,7,19,18,24,30];
      
      ngOnInit(): void {
      his.mixtrixList = this.createMixtrix();
      this.getMixItem(arr)
      }
    自己创建6*6的举证数据
      /**
       * 创建一个6*6的矩阵虚拟数据
       */
      createMixtrix() {
        let mixtrixArrOuter = [];
        let mixtrixArrInner = [];
        let data: any;
        let index = 0;
        for (let j = 0; j < 6; j++) {
          mixtrixArrInner = [];
          for (let i = 0; i < 6; i++) {
            data = {};
            data.id = index;
            data.isCheck = false;
            mixtrixArrInner.push(data);
            ++index;
          }
          mixtrixArrOuter.push(mixtrixArrInner)
        }
    
        return mixtrixArrOuter;
      }
    /**
    *	将声明的数组arr传入依次遍历，设置为true
    **/
      getMixItem(mixtrsArray) {
        mixtrsArray.map(res => {
          this.processArr(res);
        })
      }
      
      processArr(item) {
        let row;
        let col;
        col = item % 6;
        row = Math.floor(item / 6);
        this.mixtrixList[row][col].isCheck = true;
      }

mixtrixComponent.html

<div class="mixtrix">
                    <div class="mixtrixItem">
                      <span *ngFor="let audioOut of mixtrixList,let index=index;">
                        <label>CVI-{
       {index+1}}</label>
                        <span *ngFor="let audio of audioOut,let i=index;" (click)="checkAudio2(audio)">
                          <span class="block" ngDefaultControl [class.blockCheck]="audio.isCheck">
                            <div style="text-align: center;" *ngIf="audio.id==(i)">CVI-{
       {i+1}}</div>
                            <dy-icon name="icon-queding" size="12px" color='#fff'></dy-icon>
                          </span>
                        </span>
                      </span>
                    </div>
                  </div>

[20190911175645223.png]: /images/20210724/87833fb7d1374a569cb3ac4d521e1966.png
[2019091117572122.png]: /images/20210724/6e4c4b406a1949ab8361be874b1eb19f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70]: /images/20210724/2a134a72103d49ecb25cac6364115b29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 1]: /images/20210724/2ae6596652de46dd9946cb7145835652.png