我查看了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中调出第一个表的代码检查器,
'氢'细胞定义为:
<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
定义(用于样式目的),并且还将 role
从 columnheader
更改为 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 .