![](/img/trans.png)
[英]Angular Material mat-table with the error > [Can't bind to 'dataSource' since it isn't a known property of 'table'.]
[英]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 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)的粘性 header 功能。
例如
<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>
控制台日志錯誤:
無法綁定到“matHeaderRowDefPosition”,因為它不是“mat-header-row”的已知屬性
我解決了這個問題,有兩種可能的解決方案:
將@angular/cdk 從 9.2.0 升級到 9.2.2
用 HTML 選擇器替換 angular 材料選擇器,即代替
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.