Angular Material mat-table cdk v9.2.0：无法绑定到“matHeaderRowDefPosition”，因为它不是“mat-header-row”的已知属性答案

【问题标题】：Angular Material mat-table cdk v9.2.0: Can't bind to 'matHeaderRowDefPosition' since it isn't a known property of 'mat-header-row'Angular Material mat-table cdk v9.2.0：无法绑定到“matHeaderRowDefPosition”，因为它不是“mat-header-row”的已知属性
【发布时间】：2020-05-05 06:51:10
【问题描述】：

Angular CLI: 9.0.7
Node: 12.16.2
OS: darwin x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.7
@angular-devkit/build-angular      0.900.7
@angular-devkit/build-optimizer    0.900.7
@angular-devkit/build-webpack      0.900.7
@angular-devkit/core               9.0.7
@angular-devkit/schematics         9.0.7
@angular/cdk                       9.2.0
@angular/fire                      6.0.0
@angular/material                  9.2.0
@angular/material-moment-adapter   9.2.0
@ngtools/webpack                   9.0.7
@schematics/angular                9.0.7
@schematics/update                 0.900.7
rxjs                               6.5.5
typescript                         3.7.5
webpack                            4.41.2

直接使用选择器。尝试开启材质表（mat-table）的置顶功能。

例如

<div class="scanlist-container">

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

    <ng-container matColumnDef="techColumn1">
        <mat-header-cell *matHeaderCellDef>Technical Column</mat-header-cell>
        <mat-cell *matCellDef="let dataItem">{{ dataItem.tech }}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
</mat-table>
</div>

console.log 错误：

无法绑定到“matHeaderRowDefPosition”，因为它不是“mat-header-row”的已知属性

【问题讨论】：

标签： angular angular-material angular-cdk

【解决方案1】：

我解决了这个问题，有两种可能的解决方案：

将@angular/cdk 从 9.2.0 升级到 9.2.2
用 HTML 选择器替换角材质选择器，即代替

<mat-table>       --> <table mat-table>
<mat-header-cell> --> <th mat-header-cell> 
<mat-cell>        --> <td mat-cell>

上面的示例代码更改了 HTML 元素：

<div class="scanlist-container">

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

    <ng-container matColumnDef="techColumn1">
        <th mat-header-cell *matHeaderCellDef>Technical Column</th>
        <td mat-cell *matCellDef="let dataItem">{{ dataItem.tech }}</td>
    </ng-container>

    <th mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></th>
    <th mat-row *matRowDef="let row; columns: columnsToDisplay;"></th>
</table>
</div>

【讨论】：