[英]'mat-footer-cell' is not a known element
I want to try adding a footer to the mat-table
, but the error after that is being shown...我想尝试在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)
I saw a footer example of Angular material official example看到Angular材料官方例子的页脚例子
But I want to do something different with the dynamic column in the code below, but I mentioned above its error...但是我想对下面代码中的 动态列做一些不同的事情,但是我上面提到了它的错误......
<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>
I am using Angular 7 and i had installed all material modules.我正在使用 Angular 7 并且我已经安装了所有材料模块。 Without footer mat-table
working fine.没有页mat-table
工作正常。 Angular material dependancies as following.. Angular 材料依赖如下..
"@angular/material": "^5.0.0-rc.1"
Please help!请帮忙!
Thanks:)谢谢:)
Did you add import {MatTableModule} from '@angular/material/table'
to the imports in the module where the component is declared?您是否将import {MatTableModule} from '@angular/material/table'
添加到声明组件的模块中的导入中?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.