可以为角度材料表指定行标题吗？

Question

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

从纯 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”是行标题。

我知道 angular material 不使用原生表格标签，而是使用自定义标签和角色，例如：

<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= 脱颖而出）

有没有办法获取行标题？如果我在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>

如果我查看列标题“名称”，它的定义为：

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

如果我合并两者并使用列标题中的<mat-header-cell> 标记和<mat-cell> 中的class 定义（用于样式目的），并将role 从columnheader 更改为rowheader ，我得到一个有效的行标题。

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

当我使用屏幕阅读器并垂直浏览一列时，在读取表格单元格之前会正确读取行标题。它工作得很好。我只需要一种在角度材料中指定行标题的方法。

Answer 1

由于现在可以使用表格标签创建 Angular 表格，因此您可以简单地在特定单元格上指定范围属性。另外，如果你想删除所有默认的role 属性，那么你可以使用null 值[attr.role]="null" 的属性绑定：

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef scope="col" [attr.role]="null"> Name </th>
    <td mat-cell *matCellDef="let element" scope="row" [attr.role]="null"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef scope="col" [attr.role]="null"> Age </th>
    <td mat-cell *matCellDef="let element" [attr.role]="null"> {{element.age}} </td>
  </ng-container>

  <ng-container matColumnDef="favorite color">
    <th mat-header-cell *matHeaderCellDef scope="col" [attr.role]="null"> Favorite Color </th>
    <td mat-cell *matCellDef="let element" [attr.role]="null"> {{element['favorite color']}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns" [attr.role]="null"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" [attr.role]="null"></tr>
</table>

这应该会导致您从纯 html 角度获得与您所需的结果相同的结果 (https://www.w3.org/WAI/tutorials/tables/two-headers/)

唯一不能以声明方式覆盖的部分是任何表部分（thead role="rowgroup"、tbody role="rowgroup"、tfoot role="rowgroup"），但无论如何，如果需要删除（或更改）那些您可以执行的 role 属性它在您的主机组件或专用指令的 ngAfterViewInit 钩子内：

@ViewChild('tableRef', { static: false, read: ElementRef }) tableRef: ElementRef<HTMLTableElement>;

ngAfterViewInit() {
  const table = this.tableRef.nativeElement;
  Array.from(table.children).forEach(section => {
    section.removeAttribute('role');
  })
}

不要忘记将模板引用变量<table #tableRef 分配给您的表

Stackblitz Example