如何在Angular mat-table中根据rowIndex和columnIndex插入对应数据

实现步骤 #

1. 数据预处理 #

首先需要将接口返回的散列单元格数据转换为Angular Material Table可识别的二维行结构：

• 先读取返回参数里的NumRows（总条数）、NumCols（总列数）、TableData（单元格集合）三个核心字段
• 初始化一个长度为NumRows的空行数组，每个行元素下再初始化长度为NumCols的空单元格数组
• 遍历TableData中的所有单元格对象，根据RowIndex和ColumnIndex将内容填充到二维数组的对应位置（注意接口索引从1开始，数组下标从0开始，需要减1做偏移）

2. 组件TS代码示例 #

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 定义单元格结构接口
interface TableCell {
  Id: string;
  ColumnIndex: number;
  ColumnSpan: number;
  RowIndex: number;
  RowSpan: number;
  Cell: string;
}

// 定义接口返回的表格结构接口
interface TableConfig {
  NumCols: number;
  NumRows: number;
  TableData: TableCell[];
}

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  // 列标识数组，长度等于总列数
  displayedColumns: string[] = [];
  // 表格数据源
  dataSource = new MatTableDataSource<any[]>();

  ngOnInit(): void {
    // 这里替换为实际接口获取的返回数据
    const apiResponse = {
      "Table": [
        {
          "NumCols": 4,
          "NumRows": 10,
          "TableData": [
            {"Id": "1","ColumnIndex": 1,"ColumnSpan": 0,"RowIndex": 2,"RowSpan": 0,"Cell": "Data 1"},
            {"Id": "2","ColumnIndex": 2,"ColumnSpan": 0,"RowIndex": 1,"RowSpan": 0,"Cell": "Data 2"},
            {"Id": "3","ColumnIndex": 3,"ColumnSpan": 0,"RowIndex": 5,"RowSpan": 0,"Cell": "Data 3"},
            {"Id": "4","ColumnIndex": 4,"ColumnSpan": 0,"RowIndex": 3,"RowSpan": 0,"Cell": "Data 4"},
            {"Id": "5","ColumnIndex": 1,"ColumnSpan": 0,"RowIndex": 4,"RowSpan": 0,"Cell": "Data 5"},
            {"Id": "6","ColumnIndex": 2,"ColumnSpan": 0,"RowIndex": 6,"RowSpan": 0,"Cell": "Data 6"},
            {"Id": "7","ColumnIndex": 3,"ColumnSpan": 0,"RowIndex": 7,"RowSpan": 0,"Cell": "Data 7"},
            {"Id": "8","ColumnIndex": 2,"ColumnSpan": 0,"RowIndex": 8,"RowSpan": 0,"Cell": "Data 8"},
            {"Id": "9","ColumnIndex": 3,"ColumnSpan": 0,"RowIndex": 9,"RowSpan": 0,"Cell": "Data 9"},
            {"Id": "10","ColumnIndex": 4,"ColumnSpan": 0,"RowIndex": 10,"RowSpan": 0,"Cell": "Data 10"}
          ]
        }
      ]
    };

    const tableConfig: TableConfig = apiResponse.Table[0];
    this.generateTable(tableConfig);
  }

  private generateTable(config: TableConfig): void {
    // 生成列标识
    this.displayedColumns = Array.from({length: config.NumCols}, (_, i) => `col${i+1}`);
    
    // 初始化二维空数组
    const tableRows: any[][] = Array.from({length: config.NumRows}, () => 
      Array.from({length: config.NumCols}, () => '')
    );

    // 填充单元格内容
    config.TableData.forEach(cell => {
      const rowIdx = cell.RowIndex - 1;
      const colIdx = cell.ColumnIndex - 1;
      if (rowIdx >= 0 && rowIdx < config.NumRows && colIdx >=0 && colIdx < config.NumCols) {
        // 如需支持单元格合并，可在此处存储span值，后续在模板绑定
        tableRows[rowIdx][colIdx] = cell.Cell;
      }
    });

    this.dataSource.data = tableRows;
  }
}

3. 组件HTML模板示例 #

重点是不添加mat-header-row标签即可隐藏表头，完全符合无表头的需求：

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 动态生成列定义 -->
  <ng-container *ngFor="let col of displayedColumns; let colIdx = index" [matColumnDef]="col">
    <mat-cell *matCellDef="let row">
      {{ row[colIdx] }}
    </mat-cell>
  </ng-container>

  <!-- 仅保留行定义，不写表头行定义即可隐藏表头 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

4. 实现效果 #

最终渲染效果如下：

如果需要支持单元格合并，只需要在填充数据的时候把对应的RowSpan和ColumnSpan存到行数据中，然后在mat-cell上绑定[attr.rowspan]和[attr.colspan]属性即可。

内容的提问来源于stack exchange，提问作者imPK