Angular 材质表多标题行映射

Question

有一个由多个标题行组成的数据表示例

| |歌曲 1 |歌曲 2 |歌曲 3 |
|----------------------------|----------------|---- ------------|
|艺术家 |全氯乙烯% |瓦尔$ |全氯乙烯% |瓦尔$ |全氯乙烯% |瓦尔$ |
|------------------------------------------------ ------------|
| Q1 | 10% | 200 美元 | 15% | 250 美元 | | |
|体重| 10% | 200 美元 | 10% | 200 美元 | | |
| POD | 5% | 150 美元 | 10 美元 | 200 美元 | | |
| | | | | | | |
|总和 | 25% | 550 美元 | 25% | 650 美元 | | |

提供的数据集

{
    "data": [{
            "artistId": "A001",
            "artistName": "Q1",
            "songs": [{
                    "songId": "S001",
                    "songName": "Song 1",
                    "percentage": "10%",
                    "value": "$200"
                },
                {
                    "songId": "S002",
                    "songName": "Song 2",
                    "percentage": "15%",
                    "value": "$250"
                }
            ]
        },
        {
            "artistId": "A002",
            "artistName": "BW",
            "songs": [{
                    "songId": "S001",
                    "songName": "Song 1",
                    "percentage": "10%",
                    "value": "$200"
                },
                {
                    "songId": "S002",
                    "songName": "Song 2",
                    "percentage": "10%",
                    "value": "$200"
                }
            ]
        },
        {
            "artistId": "A003",
            "artistName": "POD",
            "songs": [{
                    "songId": "S001",
                    "songName": "Song 1",
                    "percentage": "5%",
                    "value": "$150"
                },
                {
                    "songId": "S002",
                    "songName": "Song 2",
                    "percentage": "10%",
                    "value": "$200"
                }
            ]
        }
    ],
    "summary": [{
            "songName": "Song 1",
            "totalPercentage": "25%",
            "totalValue": "$550"
        },
        {
            "songName": "Song 2",
            "totalPercentage": "25%",
            "totalValue": "$650"
        }
    ]
}

我想知道是否可以映射提供的数据集，以便使用角度材料表在样本表上获得类似的内容？无需分页。

Answer 1

没有人会阻止我们在垫子表中放置多个“标题”。

只需添加一个新的 tr 和不同的 matColumnDef

  <table mat-table [dataSource]="dataSource"..>
     ....
     <!--add a new "tr", you can indicate the matHeaderRowDef
         as you wat, e.g. an array ['one','two']-->

     <!--see that you add the class "title"-->
     <tr class="title" mat-header-row *matHeaderRowDef="['one','two']"></tr>
     
     <!--the typical -->
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

然后我们可以添加新的 matColumnDef“one”和“two”。确保您使用 colspan，例如

  <ng-container matColumnDef="one">
    <th mat-header-cell *matHeaderCellDef colspan="2" > n and name </th>
  </ng-container>
  <ng-container matColumnDef="two">
    <th mat-header-cell *matHeaderCellDef colspan="2" > weight & symbol </th>
  </ng-container>

   ..rest of ng-container matColumnDef...

最后一块“拼图”是在我们的标题中添加一些 .css，例如

/*To format the upper "header"*/
tr.title{
  height:1rem;
}
.title th{
  border-bottom:none;
  padding-bottom:0;
}

/*To format the lower "header"*/
tr.title + tr{
  height:2.5rem;
  vertical-align:top;
}
tr.title + tr th{
  padding-top:.25rem
}

a stackblitz