Angular material - mat-table 动态 footer/header rowDef

Question

我正在尝试有条件地显示垫子的 footer-row-table。

基于 this discussion，我知道不知何故，我必须使用 removeFooterRowDef 来删除它，我想 addFooterRowDef 或 setFooterRowDef 带来另一个。

但是我找不到关于如何使用其中之一的正确解释。

请注意，我已尝试将页脚行包装在 ng-container 中。

<ng-container *ngIf="hasFooter">
    <tr mat-footer-row *matFooterRowDef="footerRowDef"></tr>
<ng-container>

但即使 hasFooter 为假，该行仍然存在。

Answer 1

根据的回答，我发现它是和模板中的viewChild结合使用的，有

<ng-container>
    <tr *matFooterRowDef="columns" mat-footer-row></tr>
</ng-container>

并且在组件中 class

@ViewChild(MatFooterRowDef, {static: true}) footerDef: MatFooterRowDef;
@ViewChild(MatTable, {static: true}) table: MatTable;

removeFooter() {
    this.table.removeFooterRowDef(this.footerDef);
}

addFooter() {
    this.table.setFooterRowDef(this.footerDef);
}

要添加新的页脚，我们会调用 addFooterRowDef，但我调用 setFooterRowDef 来覆盖任何现有的页脚。

rowDef 和 headerRowDef 的所有其他方法都以相同的方式工作。我想 columnDef 也是。

如果有人需要，我会把它留在这里。

Angular material - mat-table 动态 footer/header rowDef

Angular material - mat-table dynamic footer/header rowDef

angular-material

angular

mat-table