我查看了https://material.angular.io/components/table,可以看到如何指定列 Headers ,但我没有看到指定行 Headers 的方法 .

从纯HTML的角度来看,我希望最终得到类似的东西:

<table>
  <tr>
    <th scope='col'>name</th>
    <th scope='col'>age</th>
    <th scope='col'>favorite color</th>
  </tr>
  <tr>
    <th scope='row'>fred</th>
    <td>35</td>
    <td>orange</td>
  </tr>
  <tr>
    <th scope='row'>barney</th>
    <td>32</td>
    <td>brown</td>
  </tr>
  <tr>
    <th scope='row'>wilma</th>
    <td>33</td>
    <td>white</td>
  </tr>
</table>

其中'fred','barney'和'wilma'是行 Headers .

我知道angular材质不使用本机表标签,而是自定义标签和角色,例如:

<div role='grid'>
  <div role='row'>
    <div role='columnheader'>name</div>
    <div role='columnheader'>age</div>
    <div role='columnheader'>favorite color</div>
  </div>
  <div role='row'>
    <div role='rowheader'>fred</div>
    <div role='gridcell'>35</div>
    <div role='gridcell'>orange</div>
  </div>
  <div role='row'>
    <div role='rowheader'>barney</div>
    <div role='gridcell'>32</div>
    <div role='gridcell'>brown</div>
  </div>
  <div role='row'>
    <div role='rowheader'>wilma</div>
    <div role='gridcell'>33</div>
    <div role='gridcell'>white</div>
  </div>
</div>

(以上显示 <div> 元素而不是 <mat-table><mat-header> 等,因为我希望 role= 能够脱颖而出)

有没有办法获得行 Headers ?如果我在https://material.angular.io/components/table中调出第一个表的代码检查器,

table snippet

'氢'细胞定义为:

<mat-cell _ngcontent-c20="" class="mat-cell cdk-column-name mat-column-name ng-star-inserted" role="gridcell">Hydrogen</mat-cell>

如果我查看列 Headers “Name”,它定义为:

<mat-header-cell _ngcontent-c20="" class="mat-header-cell cdk-column-name mat-column-name ng-star-inserted" role="columnheader">Name</mat-header-cell>

如果我合并两个并使用列 Headers 中的 <mat-header-cell> 标记和 <mat-cell> 中的 class 定义(用于样式目的),并且还将 rolecolumnheader 更改为 rowheader ,则会获得有效的行 Headers .

<mat-header-cell _ngcontent-c20="" class="mat-cell cdk-column-name mat-column-name ng-star-inserted" role="rowheader">Hydrogen</mat-header-cell>

当我使用屏幕阅读器并垂直浏览列时,在读取表格单元格之前正确读取行 Headers . 它很棒 . 我只需要一种方法来指定角度材质中的行 Headers .