简单矩阵数据构造

第一种方式： 将图片一中的数据格式转为图片二数据格式。


代码如下：

  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的矩阵数据。

图中蓝色方块代表选中true，其余为未选择false

创建6*6的矩阵数据打印结果：

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>