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 material official example的页脚示例

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

<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/material": "^5.0.0-rc.1"

请帮助！

谢谢：）

Answer 1

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

“ mat-footer-cell”不是一个已知的元素

1 个答案: