角垫表：是否可以按列合并单元格？

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      |
+------------------------------------------------------------------+

如您所见，我想将块和块大小列中的单元格合并。

Answer 1

与此同时，您可能找到了解决问题的方法，但是由于我刚刚创建了以下stackblitz，因此我愿意与他人分享，以防其他人寻求针对同一问题的解决方案。

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

Answer 2

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

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

相关的 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