CandyDataMatrix

适用于Angular项目，构建矩阵显示。

使用样例

安装方式

npm i candy-data-matrix

在对应module.ts中：

import {CandyDataMatrixModule} from "candy-data-matrix";

@NgModule({
  imports: [
    ...
    CandyDataMatrixModule
  ]
})

在html中：

    <candy-data-matrix #dataMatrix
        [rowData]="rowDataList" [columnData]="columnDataList"
        [matrixMapData]="matrixMappingData" 
        [buttonContentTemplate]="btnContent" [settingsContentTemplate]="dataSelectorBtn"
        (onMatrixDataSelected)="showRuleDetailModal($event)"
    ></candy-data-matrix>

用户需要传入 rowData 和 columnData 对应的数据来定义第一类和第一行对应的数据，同时设定 matrixMapData 来定义行列两两相交时候的关系数据

buttonContentTemplate 对应每组数据相交的时候按钮显示的内容 settingsContentTemplate 对应左上角第一格的位置，可用于显示设置按钮之类的内容。

配置项

| 参数 | 说明 | 类型 | 默认值 | 例子 | | ---- | ---- | ---- | ---- | --- | | [rowData] | 行对应的数据 | MatrixData[] | [] | 详情请见注意项1 | | [columnData] | 列对应的数据 | MatrixData[] | [] | 详情请见注意项1 | | [matrixMapData] | 行列相交的对象对应的数据 | MatrixMapData[] | [] | 详情请见注意项2 | | [buttonContentTemplate] | 行列相交的对象按钮显示的内容 | TemplateRef<{ $implicit: data }> | null | | | [settingsContentTemplate] | 行列相交的对象按钮显示的内容 | TemplateRef<void> | null | | | (onMatrixDataSelected) | 行列相交的对象按钮点击的时候返回的数据 | EventEmitter<any> | null | 详情请见注意项3 |

注意事项

1. MatrixData 类型：

   export class MatrixData {
     id: number;
     name: string;
     metaData: any;
     constructor(data: any, id: any, name: string) {
       this.id = id;
       this.name = name;
       this.metaData = data;
     }
   }

   其中id用于限定数据唯一性，name用于矩阵中的显示内容，metaData代表元数据。

2. MatrixMapData 类型：

   export class MatrixMapData {
    rowId: number;
    columnId: number;
    metaData: any;
    constructor(data: any, rowId: any, columnId: number) {
      this.rowId = rowId;
      this.columnId = columnId;
      this.metaData = data;
    }
   }

   MatrixMapData 数据用于将行列数据关联起来，rowId对应行数据中的id, columnId对应列数据中的id；metaData用于表示两者相关的时候所需要的元数据

3. 数据返回的格式为

   {
     row: rowData.metaData,
     column: columnData.metaData,
     mapData: matrixMapData.metaData : null
   }