Angular mat-table：是否可以按列合并单元格？

Question

我无法找到有关如何在 mat-table 中合并列单元格的答案。在使用when 合并行单元格时只看到了几个例子。所以想知道我是否可以在这里找到答案。

我有这个 JSON 数据：

{
    "id": 4,
    "description": "this is another block",
    "block_size": 3480,
    "lot_count": 5,
    "lots": [
        {
            "id": 17,
            "lot_name": "test 17",
            "status": "SOLD",
            "block_id": 4,
            "lot_id": 1,
            "lot_size": 828
        },
        {
            "id": 18,
            "lot_name": "test 18",
            "status": "OPEN",
            "block_id": 4,
            "lot_id": 2,
            "lot_size": 885
        },
        {
            "id": 19,
            "lot_name": "test 19",
            "status": "SOLD",
            "block_id": 4,
            "lot_id": 3,
            "lot_size": 648
        },
        {
            "id": 20,
            "lot_name": "test 20",
            "status": "OPEN",
            "block_id": 4,
            "lot_id": 4,
            "lot_size": 553
        },
        {
            "id": 21,
            "lot_name": "Test 21",
            "status": "OPEN",
            "block_id": 4,
            "lot_id": 5,
            "lot_size": 566
        }
    ]
}

并且期望 mat-table 中的输出为：

+------------------------------------------------------------------+
| No.        Lot Name    Block    Block Size    Lot Id    Lot Size |
+------------------------------------------------------------------+
| 17         test 17                            1         828      |
| 18         test 18                            2         885      |
| 19         test 19     4        3480          3         648      |
| 20         test 20                            4         553      |
| 21         test 21                            5         566      |
+------------------------------------------------------------------+

如您所见，我想让 Block 和 Block Size 列中的单元格合并。

Answer 1

与此同时，您可能找到了解决问题的方法，但由于我刚刚创建了以下 StackBlitz，因此我分享它以防其他人寻找相同问题的解决方案。

https://stackblitz.com/edit/angular-gevqvq

此解决方案中的RowSpanComputer 类基于开源项目Koia 中的代码。在那里，计算出的rowspan 属性在summary-table.component.html 中使用。

更新

上面链接的 StackBlitz 中的代码示例仅适用于乐观情况。理想情况下，不会为表的最后一列计算行跨度，否则如果行与前一列相同，则不会显示行。

ngOnInit() {
  this.columnNames = Object.keys(this.data[0]);
  this.lastColumnName = this.columnNames[this.columnNames.length - 1];
  this.allButLastColumnNames = this.columnNames.slice(0, -1);
  this.rowSpans = this.rowSpanComputer.compute(this.data, this.allButLastColumnNames);
}

在 HTML 模板中也必须考虑到这一点。在那里我们区别对待前一列和最后一列。

<table mat-table *ngIf="rowSpans" [dataSource]="data" class="mat-elevation-z8">
  <ng-container *ngFor="let columnName of allButLastColumnNames; let iCol = index" [matColumnDef]="columnName">
    <th mat-header-cell *matHeaderCellDef>{{ columnName }}</th>
    <td mat-cell *matCellDef="let row; let iRow = index" [attr.rowspan]="rowSpans[iCol][iRow].span"
       [style.display]="rowSpans[iCol][iRow].span === 0 ? 'none'  : ''">{{ row[columnName] }}</td>
  </ng-container>
  <ng-container [matColumnDef]="lastColumnName">
    <th mat-header-cell *matHeaderCellDef>{{ lastColumnName }}</th>
    <td mat-cell *matCellDef="let row; let iRow = index">{{ row[lastColumnName] }}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
  <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
</table>

请看看这个改进的StackBlitz，看看它是如何工作的。

Answer 2

您想“使块和块大小列中的单元格合并。”...没有“块大小”字段，所以我假设您的意思是“批量大小”与“块 ID”合并。

为此，我们创建一个任意列名称“mergedField”（在 TS 中），然后一起打印出 {{element.block_id}}{{element.lot_size}}（在 HTML 中）

相关TS：

import { Component } from '@angular/core';
import { AppService } from './app.service'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  displayedColumns: string[] = ['id', 'lot_name', 'block_id', 'mergedField', 'lot_id', 'lot_size', 'status'];
  dataSource;
  myJSONData: any[] = [];
  constructor(private userService: AppService) {
  }

  ngOnInit() {
    let someVar = this.userService.getJSON();
    this.myJSONData = someVar.lots;
    console.log(this.myJSONData);
    this.dataSource = this.myJSONData;
  }

}

相关HTML：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- id Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> No </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- block_id Column -->
  <ng-container matColumnDef="block_id">
    <th mat-header-cell *matHeaderCellDef> Block </th>
    <td mat-cell *matCellDef="let element"> {{element.block_id}} </td>
  </ng-container>

  <!-- block_id Column -->
  <ng-container matColumnDef="mergedField">
    <th mat-header-cell *matHeaderCellDef> Block Size (merged) </th>
    <td mat-cell *matCellDef="let element"> {{element.block_id}}{{element.lot_size}} </td>
  </ng-container>


  <!-- lot_id Column -->
  <ng-container matColumnDef="lot_id">
    <th mat-header-cell *matHeaderCellDef> Lot ID </th>
    <td mat-cell *matCellDef="let element"> {{element.lot_id}} </td>
  </ng-container>

  <!-- lot_name Column -->
  <ng-container matColumnDef="lot_name">
    <th mat-header-cell *matHeaderCellDef> Lot Name </th>
    <td mat-cell *matCellDef="let element"> {{element.lot_name}} </td>
  </ng-container>

  <!-- lot_size Column -->
  <ng-container matColumnDef="lot_size">
    <th mat-header-cell *matHeaderCellDef> Lot Size </th>
    <td mat-cell *matCellDef="let element"> {{element.lot_size}} </td>
  </ng-container>


  <!-- status Column -->
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

完成working stackblitz here