[英]'mat-footer-cell' is not a known element
我想嘗試在mat-table
添加頁腳,但之后的錯誤正在顯示...
webpack-internal:///../../../compiler/esm5/compiler.js:24547 Uncaught Error: Template parse errors:
'mat-footer-cell' is not a known element:
1. If 'mat-footer-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-footer-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (")">
{{element[columnName]}} </mat-cell>
[ERROR ->]<mat-footer-cell *matFooterCellDef>{{element[columnName]}}</mat-footer-cell>
"): ng:///AppModule/TestComponent.html@99:28
'mat-footer-row' is not a known element:
1. If 'mat-footer-row' is an Angular component, then verify that it is part of this module.
2. If 'mat-footer-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
[ERROR ->]<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table"): ng:///AppModule/TestComponent.html@104:24
Can't bind to 'matFooterRowDef' since it isn't a known property of 'mat-footer-row'.
1. If 'mat-footer-row' is an Angular component and it has 'matFooterRowDef' input, then verify that it is part of this module.
2. If 'mat-footer-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("*matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row [ERROR ->]*matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>
"): ng:///AppModule/TestComponent.html@104:40
Property binding matFooterRowDef not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
[ERROR ->]<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table"): ng:///AppModule/TestComponent.html@104:24
at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:684)
at TemplateParser.parse (webpack-internal:///../../../compiler/esm5/compiler.js:24547)
at JitCompiler._parseTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33934)
at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33909)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33811)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33811)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33681)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:673)
at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33680)
但是我想對下面代碼中的 動態列做一些不同的事情,但是我上面提到了它的錯誤......
<mat-table #table [dataSource]="transactions" matSort class="mat-elevation-z8">
<ng-container [matColumnDef]="columnName" *ngFor="let columnName of displayedColumns;let i = index">
<mat-header-cell mat-sort-header *matHeaderCellDef> {{displayedColumns[i]}} </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row[columnName]}} </mat-cell>
<mat-footer-cell *matFooterCellDef>
{{columnName === 'item' ? 'Total': getTotalCost()}}
</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>
我正在使用 Angular 7 並且我已經安裝了所有材料模塊。 沒有頁mat-table
工作正常。 Angular 材料依賴如下..
"@angular/material": "^5.0.0-rc.1"
請幫忙!
謝謝:)
您是否將import {MatTableModule} from '@angular/material/table'
添加到聲明組件的模塊中的導入中?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.