'mat-footer-cell' 不是已知元素

Question

我想尝试在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)

看到Angular材料官方例子的页脚例子

但是我想对下面代码中的 动态列做一些不同的事情，但是我上面提到了它的错误......

<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"

请帮忙！

谢谢：）

Answer 1

您是否将import {MatTableModule} from '@angular/material/table'添加到声明组件的模块中的导入中？