WebStorm提示‘mat-sort-header需要值’错误的解决求助

云原生阿岚

2026-8-19

Angular Material mat-sort-header功能正常，但WebStorm提示'mat-sort-header requires value'错误

问题场景

使用Angular Material的mat-sort-header实现表格排序时，功能完全正常，但WebStorm持续报错：mat-sort-header requires value，该问题在多个项目中均出现。示例代码如下：

<table mat-table [dataSource]="dataSource" matSort>
  ...
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  
</table>

解决方案

显式传入排序ID
Angular Material允许省略mat-sort-header的属性值，此时会自动将列名（matColumnDef的值）作为排序ID，但WebStorm的静态检查未识别这个逻辑。只需显式指定值即可消除报错：
```
<th mat-header-cell *matHeaderCellDef mat-sort-header="name">Name</th>
```
升级WebStorm版本
这是IDE对Angular Material语法的误报，JetBrains在后续版本中可能修复了该识别问题。直接升级到最新版WebStorm，大概率能解决这类框架语法检查的bug。
关闭特定检查项
若暂时无法升级IDE，可手动禁用该误报规则：
1. 打开WebStorm设置（File > Settings）
2. 进入Editor > Inspections > HTML > Angular > Angular attribute validation
3. 找到与mat-sort-header requires value相关的规则，取消勾选或将严重级别改为警告
调整TypeScript配置
确认项目tsconfig.json中正确引入了Angular Material类型：
```
{
  "compilerOptions": {
    "types": ["@angular/material"]
  }
}
```
若开启了strictTemplates，可尝试临时关闭该选项，验证是否因模板检查过度严格导致误报。